Prévia do material em texto
Aplicaciones web
A
plicaciones W
eb
Aplicaciones web
Raül V. Lerma-Blasco
José Alfredo Murcia Andrés
Elvira Mifsud Talón
R. V. Lerm
a-Blasco J. A
. M
urcia E. M
ifsud
«La base de tu futuro»
Ésta es la filosofía del proyecto editorial de McGraw-Hill para Ciclos
Formativos, una etapa decisiva en la formación de profesionales.
El proyecto para el módulo Aplicaciones web, incluido en el nuevo ciclo
formativo Técnico en Sistemas Microinformáticos y Redes, y que está estructu-
rado en dos niveles de uso, para el alumno y para el profesor, ha sido
desarrollado según tres principios básicos:
• Una metodología basada en la práctica y en la adecuación
de contenidos y procedimientos a la realidad profesional.
• Unos materiales desarrollados para conseguir las destrezas,
habilidades y resultados de aprendizaje que necesitarás para
conseguir tu título y desenvolverte en el mercado laboral.
• Una presentación de los contenidos clara y atractiva, con
variedad de recursos gráficos y multimedia que facilitarán tu
aprendizaje.
Para el alumno Para el profesor
CEO del alumno Guía didáctica
en CEO del profesor
Confiamos en que esta obra sea una herramienta útil y eficaz, y que
contribuya a tu formación como profesional.
Materiales del proyecto
www.mhe.es/cf/informatica
ISBN: 978-84-481-8392-9
Formativo
Ciclo
Grado
Medio
www.mhe.es/cf/informatica
Grado
Medio
Formativo
Ciclo
Grado
Medio
Aplicaciones web
Raül V. Lerma-Blasco (coord.)
José Alfredo Murcia Andrés
Elvira Mifsud Talón
Revisor técnico
Marcos Villagordo Castejón
Prólogo de
Yolanda Ruiz Hervás
MADRID - BARCELONA - BOGOTÁ - BUENOS AIRES - CARACAS - GUATEMALA
MÉXICO - NUEVA YORK - PANAMÁ - SAN JUAN - SANTIAGO - SÃO PAULO
AUCKLAND - HAMBURGO - LONDRES - MILÁN - MONTREAL - NUEVA DELHI - PARÍS
SAN FRANCISCO - SIDNEY - SINGAPUR - ST. LOUIS - TOKIO - TORONTO
APLICACIONES WEB · Ciclo Formativo Grado Medio
No está permitida la reproducción total o parcial de este libro, ni su tratamiento
informático, ni la transmisión de ninguna forma o por cualquier medio, ya
sea electrónico, mecánico, por fotocopia, por registro u otros métodos, sin el
permiso previo y por escrito de los titulares del Copyright.
Si necesita fotocopiar o escanear algún fragmento de esta obra, diríjase a
CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org).
Nota: Este libro se atiene al artículo 32 del derecho de cita de la Ley de
Propiedad Intelectual de 1996 (RDLeg 1/1996 de 12 de abril)
Derechos reservados © 2013, respecto a la primera edición en español, por:
McGraw-Hill/Interamericana de España, S.L.
Edificio Valrealty, 1.a planta
Basauri, 17
28023 Aravaca (Madrid)
ISBN: 978-84-481-8570-1
© Raül V. Lerma-Blasco
© José Alfredo Murcia Andrés
© Elvira Mifsud Talón
Autores del material complementario: Raül V. Lerma-Blasco, José A. Murcia Andrés,
Elvira Mifsud Talón, Marcos Villagordo Castejón
Revisión técnica: Marcos Villagordo Castejón
Equipo editorial: Ariadna Allés, Paloma Sánchez, Silvia García
Diseño de cubierta: rload.es
Diseño interior: dfrente.es
Fotografías: 123RF
Ilustraciones: Mª Carmen Fuente Canalda
Composición: Espacio y Punto, S.A.
© 2013, Obra original: Aplicaciones web
respecto a la segunda edición en español, por McGraw-Hill Interamericana de España, S.L.
ISBN edición original: 978-84-481-8392-9
Prólogo
El mundo está cada vez más interconectado. Seguramente a ti, nativo digital, no
te sorprende, porque has tenido la gran suerte de crecer en la era de Internet.
Pero, si miras la evolución de las nuevas tecnologías bajo su perspectiva histó-
rica, te darás cuenta de que lo que ahora te parece natural no siempre fue así.
Ahora, las empresas desarrollan sus negocios a través de la Red, apoyándose
en sus comunidades de usuarios en redes sociales, con los que, por primera vez,
puede mantener un diálogo directo y fluido. Los trabajadores nos movemos en
un entorno digital aprovechándonos de todas sus ventajas, como la deslocaliza-
ción de proyectos, la gestión on-line y en tiempo real que permite el teletrabajo.
El portátil, la tablet y el smartphone protagonizan nuestras vidas dentro de la
Internet móvil. Tenemos eso que llamamos Identidad Digital, que no es más
que nuestro yo en un entorno digital, cuya correcta gestión y cuidado puede
significar el asegurarnos un próspero futuro.
Pero hay más: hasta lo más cotidiano, como hacer la compra, realizar una
transferencia bancaria o simplemente quedar con los amig@s, lo hemos trasla-
dado a un mundo que se va construyendo día a día y que evoluciona a pasos
de gigante.
Asistimos a la vida real contada al segundo gracias a las nuevas tecnologías.
Y hasta las relaciones personales tienen, en muchos casos, su origen en la Red.
Ocio, negocio, trabajo, relaciones… Nada se escapa a un entorno virtual cada
vez más interconectado, cada vez más digital y cada vez más interactivo.
Lo que hace unos años veíamos como ficción en el cine ahora se ha convertido
en realidad. Una realidad que nace al margen de fronteras nacionales, juris-
dicciones, creencias o ideales, y que a su vez lo aglutina todo. Una realidad
que necesita seguir creciendo de forma saludable y que demanda talento,
savia nueva que entienda de verdad cuál es el camino a seguir.
Y es en este contexto donde entras tú, porque probablemente mañana serás uno
de los grandes profesionales especializados en la Red, capaz de facilitarnos a
los miles de millones de internautas y a las empresas o gobiernos nuevas herra-
mientas, nuevos modos de relacionarnos y nuevos modelos de negocio.
Este libro que tienes en tus manos te abre el camino a un mundo espectacular
donde lo importante no es el pasado, ni siquiera el presente, sino el futuro: un
futuro todavía más digital, que seguirá cambiando el rumbo de la humanidad.
Y tú eres, sin duda, uno de sus principales protagonistas.
Yolanda Ruiz Hervás
Directora de Marketing y Social Media, ESET NOD32 España
Directora de formación en Social Media Marketing, Agencia EnRedesSociales
Presentación
El libro que presentamos es el resultado de un apasionante trabajo por explicar
algunas de las más importantes innovaciones que están surgiendo en Internet
en estos momentos, siendo la actualización de nuestro anterior libro, publicado
en 2010. Está destinado al alumnado del Ciclo Formativo de Grado Medio de
Sistemas Microinformáticos y Redes (SMR), cuyo currículo oficial fue aprobado
el 14 de diciembre de 2007 en el Real Decreto 1691/2007, y fue publicado
en el BOE, con fecha 17 de enero de 2008, englobado dentro del catálogo
de títulos de la familia profesional de Informática y Comunicaciones confeccio-
nados por el Instituto Nacional de las Cualificaciones (INCUAL).
Este ciclo es la actualización del anterior título de Explotación de Sistemas
Informáticos (ESI), y las competencias asociadas a su perfil profesional están
orientadas a aspectos técnicos como la instalación, configuración y manteni-
miento de redes locales, servicios de red, aplicaciones web, etc. La creación
de dicho perfil profesional complementa los ya existentes de la familia de Infor-
mática y Comunicaciones y cubre las expectativas formativas, en el ámbito de
las Tecnologías de la Información y Comunicación (TIC), de un amplio grupo
de alumnos.
Este texto se presenta con el objetivo de ayudar al alumno del Ciclo Formativo
de SMR, durante su proceso de aprendizaje, en aspectos relacionados con la
instalación, el mantenimiento y la explotación de los servicios de Red, y de esa
forma facilitar su inserción en el mundo laboral en unas condiciones óptimas
desde el punto de vista profesional. Este es, por lo tanto, un libro de referencia
para el alumno del Ciclo de SMR, en particular y, en general, para cualquier
persona que requiera la adquisición de conocimientos en este ámbito.
El libro es una guía que facilita al profesor el desarrollo curricular del módulo
de «Aplicaciones web». Su estructura, contenidos,secuenciación y objetivos
siguen las pautas indicadas en las especificaciones de este módulo, incluido en
el primer o segundo curso del título de Técnico en Sistemas Microinformáticos y
Redes, dependiendo de la Comunidad Autónoma en que se estudie.
El libro consta de cuatro unidades didácticas, más otras dos unidades transver-
sales que desarrollan un proyecto unificador de las anteriores que está dividido
en dos partes para poder realizarlos al final de cada evaluación, en las que se
estudian las principales aplicaciones web (englobadas dentro del concepto de
social media, anteriormente denominado Web 2.0), como son las aplicaciones
web de escritorio y blogs, las aplicaciones web ofimáticas y herramientas cola-
borativas (como wikis y grupos de trabajo), los sistemas gestores de contenidos
(CMS), centrándonos en WordPress, por su gran flexibilidad y aceptación por
parte de los nativos digitales, las aplicaciones de almacenamiento web y mul-
timedia en Internet y los entornos virtuales de aprendizaje (EVA), centrándonos
en la nueva versión 2 de Moodle, por su gran versatilidad y aceptación por
parte de las empresas y las instituciones educativas.
Todos ellos, tratados con un enfoque eminentemente práctico y, en la medida
de lo posible, desde una óptica empresarial, trabajando con sistemas libres de
fuente abierta (como la Fundación Mozilla, que desarrolla el navegador Fire-
fox) y/o servicios gratuitos de empresas de Internet, como Google, Microsoft,
Yahoo!, etc.
Sin olvidar las apps que se han ido creando estos últimos años desde la apari-
ción del iPhone para todo tipo de smartphones y tabletas, dentro del desarrollo
frenético para estar siempre conectados con la Internet móvil que forma parte
de la vida de los nativos digitales.
Cada unidad dispone de un esquema-resumen con los conceptos más importan-
tes, junto con una prueba de autoevaluación, con preguntas de tipo test y un con-
junto de actividades al final de la unidad, llamado «Comprueba tu aprendizaje»,
que ayudará al alumnado a repasar la unidad de forma secuencial, incidiendo
en los puntos de mayor interés o relevancia de cada unidad didáctica.
El alumnado dispone de acceso vía web al Centro de Enseñanza On-line
(CEO), donde encontrará información práctica que pueden utilizar para afian-
zar e incluso ampliar conocimientos y autoevaluarse, así como todos los recur-
sos didácticos necesarios para el desarrollo del módulo «Aplicaciones web».
Queremos agradecer a la editorial McGraw-Hill la oportunidad que nos ha
brindado por segunda vez consecutiva, al confiar en nosotros para llevar a
cabo este proyecto docente, que ahora actualizamos, así como a todas las
personas que lo han hecho posible y nos han ayudado a lo largo de este tiem-
po a mejorarlo. Como Yolanda Ruiz Hervás, que ha escrito el prólogo. O a los
compañeros de los centros: INS Nicolau Copèrnic de Terrassa (Barcelona), el
CPIFP Los enlaces y el CPIFP Corona de Aragón de Zaragoza, el IES Politècnic
de Palma de Mallorca y el IES Sant Vicent Ferrer de Algemesí (Valencia) que
han participado durante los años 2011-2012 en un Proyecto de Innovación del
Ministerio de Educación denominado «Paquete integrado de herramientas in-
formáticas para la gestión de centros de FP» (softpack-fp), cuya documentación
está abierta en la Wiki: http://softpack-fp.wikispaces.com.
Por último, dedicamos el libro a nuestros alumnos, amigos, compañeros profe-
sores de Informática — especialmente, a los de nuestros centros en Valencia:
IES Sant Vicent Ferrer de Algemesí , IES Jaume II el Just de Tabernes de la Vall-
digna y el IES Abastos (anteriormente denominado IFP Manuel Sánchez Ayuso)
de Valencia—, personal interno o externo, a la editorial que ha colaborado
en su elaboración, sin olvidarnos de nuestro amigo y compañero Raúl Juncos
Castillo, que no ha podido colaborar en esta edición, pero esperamos que en
las próximas podamos volver a contar con sus inestimables conocimientos y,
en especial, a nuestros familiares (Lourdes, Arantxa y Luis) por su paciencia
y comprensión durante la fresca primavera, caluroso verano y lluvioso otoño
de 2012.
Los autores
smrweb2@gmail.com
66
Unidad 1. Aplicaciones web sociales ................... 7
1. La web social ............................................ 8
2. La social media ......................................... 16
3. Diseño web .............................................. 22
4. Google Apps para trabajo colaborativo ...... 42
5. Integración de aplicaciones web en
el escritorio............................................... 58
Unidad 2. Sistemas gestores de contenidos .......... 69
1.¿Qué es un sistema de gestión de contenidos? .. 70
2. Sistema gestor de contenidos WordPress ...... 72
3. Estructura del CMS WordPress .................... 75
4. Ajustes básicos de configuración y
aspecto de WordPress ............................... 76
5. Usuarios de WordPress .............................. 78
6. Organización de los contenidos .................. 80
7. Gestión de Menús ..................................... 82
8. Gestión de contenidos ............................... 84
9. Gestor de la página de inicio ..................... 91
10. Otros componentes de WordPress ............... 92
11. Gestión de temas ...................................... 93
12. Gestión de plugins .................................... 97
13. Sindicación .............................................. 102
14. WordPress como blog ................................ 103
15. Copia y restauración del portal ................... 104
16. Actualización de WordPress ....................... 108
17. SEO y seguridad en WordPress .................. 109
Unidad 3. Proyecto Emprende I ........................... 113
1. Oportunidades de futuro ............................ 114
2. Nuestra empresa, sí, nuestra ...................... 116
3. Parte admininstrativa ................................. 117
4. Parte técnica ............................................. 117
5. ¿Cómo empezamos? Plan de trabajo ........... 118
Unidad 4. Almacenamiento web y multimedia ..... 121
1. El almacenamiento en la nube .................... 122
2. Servicios de almacenamiento
y distribución de archivos ........................... 123
3. Servicios de disco duro virtual .................... 130
4. Servicios de almacenamiento multimedia ..... 146
Unidad 5. Entornos virtuales de aprendizaje ........ 163
1. Entornos virtuales de aprendizaje (EVA) ....... 164
2. Características básicas de los sistemas
e-learning ................................................. 166
3. Moodle .................................................... 168
4. Gestión de usuarios del EVA Moodle ........... 176
5. La administración del sistema
e-learning ................................................. 179
6. La gestión de cursos en el sistema
e-learning ................................................. 182
7. Los módulos en sistemas de e-learning:
tipos y configuración ................................. 190
8. Mecanismos básicos de seguridad .............. 194
9. El procedimiento de actualización ............... 196
Unidad 6. Proyecto Emprende II .......................... 201
1. ¿Cómo ha ido? ......................................... 202
2. Y en nuestra empresa ................................ 203
3. Manos a la obra ....................................... 203
4. Moodle .................................................... 208
Anexo: glosario .................................................. 209
Índice
1Unidad
Aplicaciones web sociales
En esta unidad aprenderemos a:
• Identificar diferentes aplicaciones
web sociales y de escritorio.
• Gestionar nuestras cuentas de
usuario e identidad web.
• Crear documentos con HTML y CSS
e integrarlos en plataformas web.
• Instalar aplicaciones para
proporcionar acceso web a
diferentes tipos de servicios,
como el correo electrónico.• Configurar las aplicaciones
para integrarlas con un servidor
de correo.
• Utilizar aplicaciones de
calendario web.
• Reconocer las prestaciones
específicas de las
aplicaciones instaladas
(citas, tareas,
entre otras).
Y estudiaremos:
• Qué son las aplicaciones web
sociales y de escritorio.
• Qué es y cómo crear nuestra
identidad digital.
• Cómo crear documentos
mediante HTML y CSS.
• Cómo crear sitios web sencillos.
• Qué es y cómo se usa el correo web.
• Qué es y cómo se usa
el calendario web.
• Cómo integrar aplicaciones
web con nuestro escritorio.
• Qué es un webOS y cómo
se instala, se usa
y administra.
Aplicaciones web sociales1
8
1. La web social
¿Internet ha muerto? Esto es lo que afirman algunos gurúes o profetas del ciberespacio,
mientras que otros indican que se ha socializado. Según ellos se ha humanizado utilizan-
do la inteligencia ambiental tanto en nuestros mundos virtuales en la Red (que se han ido
fusionando con nuestras vidas físicas) como con la utilización de dispositivos móviles.
Los denominados nativos digitales como tú (nacidos a partir de las últimas décadas del
siglo XX) ya no podéis vivir sin estar conectados entre vosotros, con las cosas o estas
entre ellas. Los blogs, tuits o muros de vuestros amigos requieren de vuestra atención en
tiempo real (la información se quiere consumir en el mismo momento en que se genera
desde cualquier sitio de manera ubicua, a veces, incluso geolocalizados).
Esto mismo quieren las empresas actuales: aprender, conocer, analizar y conversar con
sus clientes prosumidores para venderles sus productos, según sus necesidades propues-
tas por ellos mismos o por influencers que generan ingentes cantidades de información
de varios petabytes que van a obligar a generar metadatos sobre los mismos que permi-
tan darles una relación semántica que ayude para catalogarlos mejor y tratarlos como
grandes almacenes de datos (en inglés data warehouse) o nuevos sistemas llamados
big data que permitan que se extraiga conocimiento de ellos o incluso de la Internet
profunda o invisible.
Fig. 1.1. Evolución de la red Internet hasta el Internet de las cosas.
Fuente: http://www.fundacionbankinter.org/es/publications/social-technologies.
Pero seguro que nadie se imagina que todo este mundo de aplicaciones web surgió de
una guerra fría, la misma que llevó al hombre a la Luna en 1969. E hizo que el 29 de
octubre de ese mismo año se conectaran los dos primeros ordenadores de los cuatro
que participaron en el nacimiento de Arpanet, que fue la red precursora, hasta 1989,
de la Internet que hoy conocemos y que no para de evolucionar. Siendo la Web, sin
duda, el servicio por excelencia, aunque cada vez más con la Internet móvil se tienda a
la utilización de aplicaciones web específicas llamadas apps para hacer cosas más con-
cretas dentro de las plataformas web. Las múltiples herramientas que toda organización,
empresa o usuario dispone para publicar cualquier tipo de contenido, ya sea de forma
individual o colectiva (blogs, wikis, etc.), contribuyen a la construcción de un espacio de
comunicación cada vez más abierto y democratizado.
Empresa Google Apple RIM Microsoft
Servicios en la nube
Sistemas operativos
móviles
Smartphones y tablets
(hardware móvil)
Motorola (propiedad de
Google) y otros como
Samsung o HTC
Propios: iPhone y iPad Propios: BlackBerry Nokia y otros
Tabla 1.1. Principales plataformas móviles.
Arpanet. Según la Wikipedia
son las siglas en inglés de
Advanced Research Projects
Agency Network, es decir, la Red
de la Agencia de Proyectos de
Investigación Avanzados: http://
es.wikipedia.org/wiki/ARPANET.
Inteligencia Ambiental o AmI.
Según la Wikipedia, es una
«visión donde los humanos están
rodeados de tecnología de com-
putación y red empotrada de
manera no intrusa en su entor-
no».
Internet de las cosas. Según
la Wikipedia, se refiere a una
red de objetos cotidianos inter-
conectados entre sí: http://
es.wikipedia.org/wiki/Internet_
de_las_Cosas.
Internet profunda o invisible.
Según la Wikipedia, es todo
el contenido de Internet que no
forma parte del Internet super-
ficial, es decir, de las pági-
nas indexadas por las redes
de los motores de búsqueda de
Internet: http://es.wikipedia.org/
wiki/Internet_profunda.
Prosumidores. Son consumido-
res que opinan on-line sobre su
experiencia de consumo.
Influencers. Son gente famosa
o popular que por su reputa-
ción son capaces de mover a
millones de personas en la Red,
afectando en ocasiones a la
reputación corporativa de las
empresas.
Vocabulario
9
1 Aplicaciones web sociales
1.1. Internet, la Web y sus aplicaciones
Internet surgió en 1989, cuando Tim Berners-Lee y Robert Cailiau desarrollaron un siste-
ma basado en hipertextos (HTTP + HTML = WEB) para facilitar el acceso a la informa-
ción del CERN (Organización Europea para la Investigación Nuclear). Se organizaba
mediante una red de enlaces o hipervínculos entre diversos documentos que podían
visualizarse con la ayuda de una aplicación específica: el navegador.
Por tanto, la Web 1.0 se concibió como una colección de documentos estáticos enlaza-
dos para su consulta o descarga, donde los usuarios no podían interactuar con ellos,
teniendo que hacer un consumo pull, es decir, se iba a por el recurso siendo la actuali-
zación unidireccional. A medida que el sistema se hizo popular, aumentaron sus pres-
taciones. De manera progresiva, se desarrollaron métodos que permitiesen la creación
de páginas con contenidos dinámicos, que dio lugar a la Web 1.5 en 1997, de modo
que estos se generasen en función de los parámetros de la petición. Aparecieron así los
CGI, aplicaciones escritas en algún lenguaje de programación que se ejecutaban en el
servidor, y que podían recibir parámetros de los clientes. Pese a su gran utilidad, ten-
dían a sobrecargar el servidor, de ahí que surgiesen sistemas de ejecución de módulos
más integrados en el servidor y lenguajes de programación interpretados que permitían
incluir código en las páginas HTML. No tardaron en aparecer diversas arquitecturas y
lenguajes de programación, tanto en la parte del cliente con lenguajes de script como
Javascript o VBscript u objetos incrustados en la página como los applets realizados en
Java. O en la parte del servidor, con lenguajes como PHP, ASP o JSP, que permitían
el desarrollo de páginas web totalmente dinámicas e interactivas con acceso a SGBD.
Estas tecnologías dieron paso en 2003 a las aplicaciones Web 2.0, donde los usuarios
empiezan a colaborar entre ellos, el consumo pasa a poder ser push, es decir, con
tecnologías RSS: al usuario ahora le llegan los nuevos contenidos sin tener que ir a
buscarlos e incluso la actualización del contenido pasa a ser bidireccional. Los recursos
son más fáciles de producir y consumir. Accediendo a través de la Red mediante un na-
vegador u otras aplicaciones específicas. Estas generan de manera dinámica una serie
de páginas con tecnología AJAX que interpretará y representará el cliente.
La evolución de la Web ha llevado a la aparición en 2008 de una nueva etapa llamada
social media, de la mano de las redes sociales y un afán por socializar más aún las
ganas de compartir de la Web 2.0, siendo en esta cuando la Internet móvil ha facilitado
tener cualquier servicio en los diferentes dispositivos móviles que existen actualmente.
Lo próximo que nos viene en pocos años, si no ha llegado ya, es la web semántica que
nos permita diferenciar lo que buscamos dependiendo del contexto en el que nos mova-
mos, gracias a la inclusión de metadatos que conviertan la información en conocimiento,
facilitándonos aún más si cabe la interacción con las cosas o máquinas que tengamos
a nuestro alrededor.
Web 1.0 Web 1.5 Web 2.0 Social media Web semántica
El C/P es el Prosumidor
estática dinámica colaborativa social inteligente
1989 – 1997 1997 – 2003 2003 – 2008 2008 – Actual En un futuro cercano
Tabla 1.2. Evolución de laWeb.
1. ¿Dónde surgió Arpanet?
¿De dónde eran los cua-
tro ordenadores que se
interconectaron en ellos
en 1969?
2. ¿Sabes cuántos gigabytes
son un petabyte? Haz una
tabla con la escala desde
un byte hasta un peta-
byte (PB) o mejor hasta un
yottabyte (YB).
3. ¿Cuántos compañeros de
tu clase son nativos digi-
tales? ¿En qué año empe-
zaron a utilizar servicios
web? ¿Cuántos móviles
tiene cada uno? ¿Con
conexión wifi o con tarifa
de datos 3G/4G? ¿Cuál
es su plataforma móvil?
Elabora una tabla estadís-
tica con todos los datos
obtenidos.
Actividades
Computación en la nube. Según
la Wikipedia, es un paradigma
que permite ofrecer servicios de
computación a través de Internet.
http://es.wikipedia.org/wiki/
Computaci%C3%B3n_en_la_
nube.
Vocabulario
Aplicaciones web sociales1
10
¿Qué es Web 2.0? Patrones del
diseño y modelos del negocio
para la siguiente generación
del software. Artículo de Tim
O’Reilly traducido al castellano
por la Fundación Telefónica que
sirve para definir el concepto
Web 2.0, http://bit.ly/1sUBPu.
Web
1.2. Protocolos y estándares
Aunque Internet ha ido creándose sobre la marcha según las necesidades o modas que
han ido surgiendo en los últimos años, todos los sistemas o servicios aparecidos para un
uso generalizado se han ido estandarizando. Estos son los principales organismos que
lo han hecho posible con sus funciones y algunos ejemplos:
El organismo más influyente en materia de estándares web es el W3C (World Wide
Web Consortium), una asociación internacional de empresas, formada por diversas
organizaciones, cuya misión es «guiar la Web hacia su máximo potencial a través del
desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web».
Desde su creación en 1994, el W3C ha publicado más de 110 estándares abiertos
para lenguajes web y protocolos, entre los que destacan las principales tecnologías
sobre las que se basa la web, como URL, HTTP, HTML, XHTML y CSS, además de SOAP,
XML, UDDI y WSDL que sirven para las RIA y los servicios web.
Protocolos web
El principal protocolo utilizado en la Web es el HTTP, que es el Protocolo de Transferen-
cia de HiperTexto (HyperText Transfer Protocol). Fue creado en 1989 en el CERN (Labo-
ratorio Europeo de Física de las Partículas) como un medio para compartir los datos
científicos a nivel internacional, rápidamente y a bajo coste. Es el método más común
de intercambio de información en la World Wide Web, por el cual se transfieren las
páginas web o páginas HTML a un ordenador. Es decir, el hipertexto es el contenido de
las páginas web, y el protocolo de transferencia es el conjunto de normas mediante las
cuales se envían las peticiones de acceso a una web y la respuesta de esa web.
Estándares web
Se trata de un conjunto de recomendaciones sobre la creación e interpretación de do-
cumentos web, así como de la accesibilidad, la interoperabilidad y la usabilidad sobre
el desarrollo y la administración de sitios y servicios web.
Seguro que alguna vez te has encontrado con páginas que se encuentran optimizadas
para uno u otro navegador. Muchos no siguen los estándares y, a la hora de crear una
página, conviene tener en cuenta estas peculiaridades. Si todos los navegadores web
siguiesen los estándares, los desarrolladores no deberían preocuparse por optimizar las
páginas para uno u otro.
El grupo de desarrolladores
Web Standards Project (WaSP,
http://www.webstandards.org/
fue creado en el año 1998 con
la finalidad de evaluar hasta
qué punto cumplen los nave-
gadores con los estándares de
la W3C. Para tal fin, la WaSP
ideó los Acid Tests (http://www.
acidtests.org). En la actualidad,
podemos hablar de tres tipos:
Acid1, Acid2, Acid3.
Y si crees que algún navega-
dor actual no cumple con ellos,
puedes pasárselos para compro-
barlo. Existe también un test de
compatibilidad con HTML5 en el
sitio http://html5test.com/.
¿Sabías que…?
Organismo Función Ejemplos actuales en uso
Organización Internacional
para la Estandarización (ISO) Estándares.
ISO 8601: representación del tiempo y la fecha. Adoptado en Internet
mediante el Date and Time Formats de W3C que utiliza UTC.
Consorcio Unicode Estándar e informes técnicos de Unicode (UTR).
ISO 10646: Universal Character Set. El código de caracteres unicode
que es universal, uniforme y único para todos.
ECMA International Estándares. ECMA-262: lenguaje de programación ECMAScript.
Internet Assigned Numbers
Authority (IANA)
Nombres y números de registro
mantenidos.
Asignación de IP tanto versión 4 como 6. Así como la gestión de los
nombres de dominios web.
Internet Engineering Task Force
(IETF)
Estándares de Internet (STD)
y request for comments (RFC).
Petición de comentarios.
Todos los protocolos asociados a los servicios web como DNS, DHCP,
HTTP, FTP, SMTP, POP, IMAP, etc.
World Wide Web Consortium
(W3C) Recomendaciones.
URL (Localizador Uniforme de Recursos), HTTP (Protocolo de
Transferencia de HiperTexto) y HTML (Lenguaje de Marcado de
HiperTexto) actualmente en la versión 5.
Tabla 1.3. Ejemplos de estándares de los organismos que regulan los servicios web.
11
1 Aplicaciones web sociales
1.3. Aplicaciones web
La arquitectura de las aplicaciones web consta de máquinas conectadas a una red, por
lo general, Internet o una Intranet corporativa que sigue el esquema cliente-servidor en
nuestro caso de servidores web. Surgió a mediados de la década de 1990, durante
la etapa de la Web 1.0 con la aparición de las primeras conexiones de acceso con-
mutado (RTC, RDSI, GSM, GPRS) y de las etiquetas multimedia del estándar HTML y la
incorporación de pequeños programas realizados en Java, llamados applets.
Cuando un cliente realiza una petición de una URL a un servidor, teniendo en cuenta
que gracias al servicio DNS conocemos su IP, le pide una página web. Esta se busca en
el repositorio de páginas del servidor y es devuelta al cliente. Toda esta comunicación
se lleva a cabo mediante el protocolo HTTP, y el código de las páginas es básicamente
HTML junto con código CSS y JavaScript (u otros complementos como animaciones Flash
que se ejecutan en el cliente), que surgieron en la etapa de la web 1.5.
Cuando se trata de páginas web dinámicas, escritas en lenguajes de programación
para el servidor como PHP, ASP.net o JSP, el código HTML que se envía al cliente se
construye de forma dinámica dentro del programa servidor en el momento en que se
procesa la petición. Las páginas se crearán a partir de la información recibida en la
misma petición, o mediante consultas a bases de datos.
ASP.net. Lenguaje de programa-
ción, desarrollado por Microsoft
y orientado a la creación de
páginas web dinámicas dentro
de su tecnología .net.
CSS. Documentos que definen la
presentación de un documento
HTML o XML.
ECMAScript. Especificación de
un lenguaje de programación
basado en JavaScript y Jscript.
CGI. Tecnología web que per-
mite ejecutar aplicaciones en el
servidor.
HTML. Lenguaje de marcas para
la creación de páginas web.
HTTP. Protocolo de transferencia
de hipertexto, mediante el cual
se transmiten las páginas web.
Java. Tecnología de aplicacio-
nes web de Sun Microsystem,
absorbida por Oracle en 2009.
JavaScript. Lenguaje de progra-
mación de scripts, orientado a
objetos, utilizado para acceder
a ellos en aplicaciones web.
JSP. Lenguaje de programación,
basado en el lenguaje Java y
orientado a la creación de pági-
nas web dinámicas.
PHP. Lenguaje de programación
orientado a la creación de pági-
nas web dinámicas.
Servlets. En la arquitectura web
de Java, se trata de objetos que
se ejecutan en el servidor, exten-
diendo su funcionalidad.
URL. Localizador Uniforme de
Recursos. Cadena de caracte-
res utilizada para identificar un
recurso en Internet.
Usabilidad. Atributo de calidad
del software que mide la faci-
lidad de uso de las interfaces
web.
XHTML. Lenguaje de marcas
basado en XML, ideado para
sustituir a HTML.
XML. Metalenguaje extensible
de etiquetas quese propone
como estándar para el intercam-
bio y la organización de infor-
mación estructurada en la Web.
Vocabulario
Fig. 1.2. Esquema básico del servicio web.
Fig. 1.3. Esquema básico de funcionamiento del servicio web con páginas estáticas.
Fig. 1.4. Esquema básico del funcionamiento del servicio web con páginas dinámicas.
1.2. Esquema de funcionamiento de un servidor web
La arquitectura del servicio web consta de máquinas conectadas a una red (por lo ge-
neral, Internet) que realizan las funciones de clientes y de servidores web.
Cuando un cliente realiza una petición a un servidor pidiéndole una página web, esta se
busca en el repositorio de páginas del servidor y es devuelta al cliente. Toda esta comu-
nicación se lleva a cabo mediante el protocolo HTTP, y el código de las páginas es
básicamente HTML junto con código CSS y Javascript que se ejecuta en el cliente.
Cuando se trata de páginas web dinámicas, escritas en lenguajes como PHP, ASP o JSP,
el código HTML que se envía al cliente se construye de forma dinámica dentro del progra-
ma servidor en el momento en que se procesa la petición. Las páginas se crearán a partir
de la información recibida en la misma petición, o mediante consultas a bases de datos.
Fig. 1.1. Esquema básico del servicio web.
9
1Aplicaciones web de escritorio
Fig. 1.2. Esquema básico de funcionamiento del servicio web con páginas estáticas.
Fig. 1.3. Esquema básico del funcionamiento del servicio web con páginas dinámicas.
Muestra de una página web sim-
ple escrita en HTML:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi primera
página web en
<b>html!</b>
</body>
</html>
En este segundo ejemplo se ha
añadido código PHP a la página
anterior. El comando se usa para
escribir dinámicamente contenido
HTML en la página web:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi segunda
página
web en <b>html!</b>
<?php
echo “<p> La fecha
actual es: “;
$fecha=time();
echo date(“j l n Y”,
$fecha);
echo “</p>”;
?>
</body>
</html>
Ejemplo
Cliente web Internet Servidor web
Repositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
Cliente web
Internet
Servidor web
Repositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.html)
3. Envía la página
(index.html)
4. Muestra
la página
Repositorio de páginas
Base de datos
.html
.php
.jsp
.asp
Programa servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.php)
6. Se devuelve el código
html correspondiente
a index.php 3. Obtenemos
index.html
5. Consulta a base
de datos
4. Creación
del código html
a partir del
código php
CSS. Documentos que defi nen la
presentación de un documento
HTML o XML.
HTTP. Protocolo de transferencia
de hipertexto, mediante el cual
se transmiten las páginas web.
Javascript: Lenguaje de progra-
mación de scripts, orientado a
objetos, utilizado para acceder
a ellos en aplicaciones web.
Vocabulario A
007_046_APLIC WEB_01.indd 9 10/2/10 08:21:16
1.2. Esquema de funcionamiento de un servidor web
La arquitectura del servicio web consta de máquinas conectadas a una red (por lo ge-
neral, Internet) que realizan las funciones de clientes y de servidores web.
Cuando un cliente realiza una petición a un servidor pidiéndole una página web, esta se
busca en el repositorio de páginas del servidor y es devuelta al cliente. Toda esta comu-
nicación se lleva a cabo mediante el protocolo HTTP, y el código de las páginas es
básicamente HTML junto con código CSS y Javascript que se ejecuta en el cliente.
Cuando se trata de páginas web dinámicas, escritas en lenguajes como PHP, ASP o JSP,
el código HTML que se envía al cliente se construye de forma dinámica dentro del progra-
ma servidor en el momento en que se procesa la petición. Las páginas se crearán a partir
de la información recibida en la misma petición, o mediante consultas a bases de datos.
Fig. 1.1. Esquema básico del servicio web.
9
1Aplicaciones web de escritorio
Fig. 1.2. Esquema básico de funcionamiento del servicio web con páginas estáticas.
Fig. 1.3. Esquema básico del funcionamiento del servicio web con páginas dinámicas.
Muestra de una página web sim-
ple escrita en HTML:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi primera
página web en
<b>html!</b>
</body>
</html>
En este segundo ejemplo se ha
añadido código PHP a la página
anterior. El comando se usa para
escribir dinámicamente contenido
HTML en la página web:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi segunda
página
web en <b>html!</b>
<?php
echo “<p> La fecha
actual es: “;
$fecha=time();
echo date(“j l n Y”,
$fecha);
echo “</p>”;
?>
</body>
</html>
Ejemplo
Cliente web Internet Servidor web
Repositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
Cliente web
Internet
Servidor web
Repositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.html)
3. Envía la página
(index.html)
4. Muestra
la página
Repositorio de páginas
Base de datos
.html
.php
.jsp
.asp
Programa servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.php)
6. Se devuelve el código
html correspondiente
a index.php 3. Obtenemos
index.html
5. Consulta a base
de datos
4. Creación
del código html
a partir del
código php
CSS. Documentos que defi nen la
presentación de un documento
HTML o XML.
HTTP. Protocolo de transferencia
de hipertexto, mediante el cual
se transmiten las páginas web.
Javascript: Lenguaje de progra-
mación de scripts, orientado a
objetos, utilizado para acceder
a ellos en aplicaciones web.
Vocabulario A
007_046_APLIC WEB_01.indd 9 10/2/10 08:21:16
1.2. Esquema de funcionamiento de un servidor web
La arquitectura del servicio web consta de máquinas conectadas a una red (por lo ge-
neral, Internet) que realizan las funciones de clientes y de servidores web.
Cuando un cliente realiza una petición a un servidor pidiéndole una página web, esta se
busca en el repositorio de páginas del servidor y es devuelta al cliente. Toda esta comu-
nicación se lleva a cabo mediante el protocolo HTTP, y el código de las páginas es
básicamente HTML junto con código CSS y Javascript que se ejecuta en el cliente.
Cuando se trata de páginas web dinámicas, escritas en lenguajes como PHP, ASP o JSP,
el código HTML que se envía al cliente se construye de forma dinámica dentro del progra-
ma servidor en el momento en que se procesa la petición. Las páginas se crearán a partir
de la información recibida en la misma petición, o mediante consultas a bases de datos.
Fig. 1.1. Esquema básico del servicio web.
9
1Aplicaciones web de escritorio
Fig. 1.2. Esquema básico de funcionamiento del servicio web con páginas estáticas.
Fig. 1.3. Esquema básico del funcionamiento del servicio web con páginas dinámicas.
Muestra de una página web sim-
ple escrita en HTML:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi primera
página web en
<b>html!</b>
</body>
</html>
En este segundo ejemplo se ha
añadido código PHP a la página
anterior. El comando se usa para
escribir dinámicamente contenido
HTML en la página web:
<html>
<head>
<title> Aplicaciones
Web </title>
</head>
<body>
<h1>Hola Web</h1>
Esta es mi segunda
página
web en <b>html!</b>
<?php
echo “<p> La fecha
actual es: “;
$fecha=time();
echo date(“j l n Y”,
$fecha);
echo “</p>”;
?>
</body>
</html>
Ejemplo
Cliente web Internet Servidor webRepositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
Cliente web
Internet
Servidor web
Repositorio
de páginas
.html
.php
.jsp
.asp
Programa
servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.html)
3. Envía la página
(index.html)
4. Muestra
la página
Repositorio de páginas
Base de datos
.html
.php
.jsp
.asp
Programa servidor
2. Búsqueda en
el repositorio
1. Petición
(GET index.php)
6. Se devuelve el código
html correspondiente
a index.php 3. Obtenemos
index.html
5. Consulta a base
de datos
4. Creación
del código html
a partir del
código php
CSS. Documentos que defi nen la
presentación de un documento
HTML o XML.
HTTP. Protocolo de transferencia
de hipertexto, mediante el cual
se transmiten las páginas web.
Javascript: Lenguaje de progra-
mación de scripts, orientado a
objetos, utilizado para acceder
a ellos en aplicaciones web.
Vocabulario A
007_046_APLIC WEB_01.indd 9 10/2/10 08:21:16
Aplicaciones web sociales1
12
1.4. Aplicaciones web interactivas (RIA)
Se han creado a partir del siglo XXI, en la etapa de la Web 2.0, con la aparición de tecno-
logías de acceso dedicado fijo (ADSL, Módem-cable) o móvil (UMTS/3G, LTE/4G), que
han ampliado el ancho de banda consiguiendo conexiones más potentes y asequibles a
Internet. Y con la aparición de nuevas especificaciones estándares del W3C como fueron
XML, JSON, SOAP, UDDI, WSDL, RSS, ATOM o AMF para la parte del cliente. Lo que
ha permitido utilizar estas aplicaciones interactivas de Internet enriquecidas (abreviado
como RIA, acrónimo inglés de Rich Internet Application) mucho más potentes, que han
desatado una nueva guerra de complementos con nuevas funciones multimedia, como la
reproducción de vídeos, gráficos vectoriales, animaciones e interactividad para controlar
el mercado, lo que ha provocado una auténtica revolución multimedia en la Web.
La plataforma Flash de la compañía Adobe es una de las más activas al sacar su marco
cliente FLEX, pero manteniendo su hegemonía en los navegadores con Flash e incluso
en los escritorios con AIR. Se han visto aparecer tecnologías equivalentes como JavaFX,
de Oracle o Silverlight, de Microsoft. Mientras que otras grandes compañías de Internet
lideradas por Google, Amazon o Yahoo han trabajado con estándares como AJAX y
y han conseguido en 2012 que se aprobara el nuevo estándar HMTL5 del W3C que
persigue no requerir de complementos no estándares de terceras empresas e intentar así
terminar con esta guerra por Internet.
RIA. Siglas de Rich Internet
Applications. Son aplicaciones
web interactivas con característi-
cas de las aplicaciones de escri-
torio. Aunque estas utilizan un
navegador con complementos o
a través de una máquina virtual,
se agregan las características
adicionales para ejecutarse.
SOAP. Siglas de Simple Object
Access Protocol. Es un protocolo
estándar que define cómo dos
objetos en diferentes procesos
pueden comunicarse por medio
de intercambio de datos XML.
UDDI. Siglas de Universal
Description, Discovery and
Integration. Es el catálogo de
servicios de Internet.
WSDL. Siglas de Web Services
Description Language. Describe
la interfaz pública a los servicios
web.
FLEX. Agrupa una serie de tec-
nologías para dar soporte al
despliegue y desarrollo de RIA,
basadas en su plataforma pro-
pietaria Flash.
Flash. Se trata de una aplicación
de creación y manipulación de
gráficos vectoriales con posibi-
lidades de manejo de código
mediante un lenguaje de scrip-
ting llamado ActionScript.
ActionScript. Es el lenguaje de
programación de la Plataforma
Adobe Flash.
JavaFX. Es una familia de pro-
ductos y tecnologías para la
creación de RIA que tienen las
características y capacidades
de aplicaciones de escritorio,
incluyendo aplicaciones multi-
media interactivas.
Silverlight. Es una estructura
para aplicaciones interactivas
o RIA de Microsoft que agre-
ga nuevas funciones multimedia
como la reproducción de vídeos,
gráficos vectoriales, animacio-
nes e interactividad.
AJAX. Siglas de Asynchronous
JavaScript And XML (JavaScript
asíncrono y XML). Es una técni-
ca de desarrollo web estándar
para crear aplicaciones interac-
tivas o RIA.
Vocabulario
Fig. 1.5. Esquema de la plataforma Flash de Adobe para crear RIA.
13
1Aplicaciones web sociales
1.5. Servicios web
Y ahora que las aplicaciones web interactivas han evolucionado para los humanos, el si-
guiente paso se centra en el Internet de la cosas, es decir, que todo lo que nos rodea que
no es humano pueda conectarse entre sí y nos haga la vida más fácil. Esta funcionalidad
se denomina servicio web. Es complicado de definir ya que engloba gran cantidad de
conceptos, pero la W3C la define como «un conjunto de aplicaciones o de tecnologías
con capacidad para interoperar en la Web. Estas aplicaciones o tecnologías intercam-
bian datos entre sí con el objetivo de ofrecer unos servicios. Los proveedores ofrecen sus
servicios como procedimientos remotos y los usuarios solicitan un servicio llamando a
estos procedimientos a través de la Web».
El funcionamiento básico de los servicios web es el siguiente:
1. Una empresa, como proveedor, implementa su servicio y lo registra en el agente o
UDDI que hace la función de listín público de servicios web.
2. El cliente o consumidor busca el servicio web que necesita a través del UDDI.
3. El cliente puede acceder al servicio web del proveedor y decidir si lo utiliza.
Fig. 1.6. Esquema de funcionamiento de un servicio web.
Fuente: http://www.di.uniovi.es/~labra/cursos/Web20/images/VocabServiciosWeb.png.
Fig. 1.7. Ejemplo de un servicio web de una agencia de viajes.
Fuente: http://www.w3c.es/Divulgacion/GuiasBreves/images/serviciosWeb1.png.
Aplicaciones web sociales1
14
1.6. El navegador web
Se trata de la puerta de acceso a los servicios que ofrece la Web. Como ya sabe-
mos, la Web se basa en una arquitectura cliente-servidor, donde el servidor es el
programa que atiende las peticiones que hacen los navegadores y les proporciona
los recursos que solicitan mediante el protocolo HTTP. Además, cada servidor web
dispone de programas servidores para la realización de páginas dinámicas (CGI,
Servlets, ASP, JSP, PHP, etc.).
El cliente o navegador web (web browser) realiza las peticiones al servidor y presenta
al usuario las páginas web que dicho servidor le suministra. Así pues, en su versión
más simple, el navegador debe interpretar el código HTML en que están escritas y pre-
sentarlo al usuario para que este pueda interactuar con el contenido y navegar hacia
otros lugares a través de hiperenlaces. Los navegadores actuales también interpretan
las hojas de estilo en cascada (CSS), que indican cómo deben presentarse los datos, el
código JavaScript que añade dinamismo a las páginas, además de otras extensiones,
como Flash o Java, que aumentan las posibilidades de presentación.
Navegadores web de escritorio
Los principales cinco navegadores que acaparan prácticamente más del 95 % del mer-
cado son los siguientes:
• Internet Explorer (IE). Desarrollado por Microsoft, se halla integrado en Windows.
Desde 1999 es el más utilizado, aunque en los últimos años ha perdido gran nú-
mero de usuarios. Se trata de software propietario, aunque se ofrece de manera
gratuita.
• Mozilla Firefox. Desarrollado por una comunidad de programadores independientes
que colaboran dentro de la Fundación Mozilla. Es muy innovador y adapta rápida-
mente todos los estándares que van surgiendo. Nació de la liberalización del código
del navegador Navigator de la empresa Netscape. Por lo que es de código abierto y
libre, lo que le permite estar disponible para muchos sistemas operativos, entre los que
están Windows, Mac y GNU/Linux, siendo distribuido bajo la licencia MPL.
• Google Chrome. Nació con el objetivo de proporcionar una interfaz de usuario sen-
cilla y eficiente, y garantizar una navegación más estable, rápida y segura. Es pro-
piedad de Google,pero se basa en componentes de código abierto. Está disponible
para Windows, Mac y GNU/Linux.
• Safari. Se trata del navegador web desarrollado por Apple para Mac OS X, aun-
que también existe una versión para Windows. Posee un diseño bastante atractivo,
cómodo e intuitivo, y diversas características funcionales, entre las que destacamos la
integración con el reproductor de Apple QuickTime.
• Opera. Creado por la empresa Opera Software, goza de una gran aceptación gra-
cias a su velocidad, seguridad, soporte de estándares y reducido tamaño. Se encuen-
tra disponible para GNU/Linux, Windows, Mac OS X, Solaris y FreeBSD.
Dispones de los siguientes docu-
mentos:
• Firefox_basico.pdf, con una
explicación de la instalación
y una guía básica de manejo
del navegador Firefox.
• Firefox_config.pdf, para la
configuración avanzada me-
diante la opción about:config.
• Seguridad_firefox.pdf, sobre
la instalación de certificados
de seguridad en Firefox.
CEO
La licencia MPL (Mozilla Public
License) es una licencia de
software libre desarrollada
en principio por Netscape
Communications y traspasada
a la Fundación Mozilla. Cumple
con las definiciones de la Free
Software Foundation y de la
Open Source Initiative de soft-
ware libre y código abierto,
pero deja opciones para su
reutilización con fines comer-
ciales y no libres, sin restringir
la reutilización de código ni el
licenciamiento de software deri-
vado bajo la misma licencia, lo
que la convierte en incompatible
con la GNU GPL (GNU General
Public License).
¿Sabías que…?
Navegador URL
Internet Explorer http://windows.microsoft.com/es-ES/internet-explorer/products/ie/home
Mozilla Firefox www.mozilla-europe.org/es/fi refox
Google Chrome www.google.com/chrome
Safari www.apple.com/es/safari
Opera www.opera.com
Tabla 1.4. Páginas web de los principales navegadores.
15
1 Aplicaciones web sociales
Navegadores web móviles
La aparición masiva en estos últimos años de los smartphones y las tablets han obligado
a las empresas a adaptar sus navegadores a estos nuevos dispositivos móviles, sacando
versiones específicas para ellos, siendo actualmente el canal más utilizado para acceder
a las aplicaciones web y navegar por la Red.
Aunque algunos ya vienen integrados de serie con los propios sistemas operativos mó-
viles. En caso de querer instalar otro, se pueden descargar gratuitamente de las tiendas
oficiales de cada plataforma.
Otros navegadores web
Y, por último, están surgiendo dispositivos externos llamados Set-top Box (STB) o internos
para los televisores, denominados Internet TV o Smart TV, de manera que estos también
sirvan para conectarse a Internet y utilizar aplicaciones web. En este campo, el navega-
dor que más está trabajando con los fabricantes es la compañía Opera que comenzó
adaptando su navegador a las videoconsolas Nintendo DS y Wii, pudiéndolo encontrar
hoy en día en televisores como el Sony Bravia, entre otros.
Sistemas operativos
móviles
Repositorios ofi ciales
de aplicaciones https://play.google.com
http://itunes.apple.com/
es/genre/ios/id36?mt=8
http://appworld.
blackberry.com
http://www.windowsphone.
com/es-ES/marketplace
Cantidad de apps
disponibles en 2012 + de 350.000 + de 500.000 + de 100.000 + de 100.000
Tabla 1.5. Principales sistemas operativos móviles.
Fig. 1.8. Máquina virtual con el emulador del navegador Opera TV.
Fuente: http://www.opera.com/business/tv/emulator.
Aplicaciones web sociales1
16
2. La social media
Como se comenta en la introducción (Tabla 1.2. Evolución de la Web), actualmente nos
encontramos en la etapa de la socialización de los medios desde 2008, entre los cuales
el más importante es la WWW dentro de Internet, pero esto ha afectado a los demás
medios. Hoy en día, las empresas y sobre todo los medios de comunicación quieren con-
versar con sus clientes y por ello, además de sus típicas web estáticas o dinámicas, se
han creado cuentas en redes sociales como Facebook o Twitter, entre otras, para hacer
partícipes a sus clientes de sus servicios en tiempo real.
2.1. ¿Qué son los medios sociales o social media?
Según los profesores Kaplan y Haenlein, son «un grupo de aplicaciones basadas en
Internet que se desarrollan sobre los fundamentos ideológicos y tecnológicos de la Web
2.0, y que permiten la creación y el intercambio de contenidos generados por el usua-
rio». Es decir, no se acude a la Red solo para obtener información y consumirla como
se hacía hasta ahora, sino que también se quiere opinar y producir contenidos (pensar,
escribir, compartir y participar) pasando a ser prosumidores (productor + consumidor).
Se quiere conversar de tú a tú con el resto de la tela de araña que conforma Internet,
aunque creemos grupos, círculos o aldeas dentro de estos sistemas de redes sociales
para obtener información de nuestros amigos o de los amigos de estos, que son los que
nos pueden dar mayor valor añadido por su afinidad con nosotros.
Todas estas nuevas aplicaciones obedecen en buena parte a la idea de colaboración
en red o inteligencia colectiva que enunció Tim Berners-Lee, creador de la Web: «Si
queremos entender la Web y su funcionamiento, y no solo navegar por ella, deberemos
concebirla como la web de las personas: las que hacen enlaces, las que escriben, las
que siguen enlaces, las que leen.»
Dicho de otro modo: «Ahora, para mí, la Web es la conexión de toda la humanidad
mediante la tecnología.» De manera que los ciudadanos de la Red (netizens) utilizarán
Internet como espacio para relacionarse.
Siendo la reputación digital un tema crítico a cuidar, es decir, qué opina el resto de gen-
te de nosotros tanto en el mundo físico como en el virtual nos va a afectar hasta el punto
de tener que trabajarnos una identidad digital adecuada. Dentro de esta gran conver-
sación que es la social media, ha surgido la figura de los denominados influencers o
famosos que pueden influir con su opiniones en la Red en el resto de la comunidad,
pudiendo tener una repercusión tan grande que afecte a muchas personas que compren
ciertos productos (pudiendo estar pagados por las empresas esos comentarios) o hagan
ciertas cosas; un ejemplo puede ser la victoria que consiguió Obama gracias al apoyo
en la Red para lograr ser presidente de los Estados Unidos.
El escritor húngaro Frigyes
Karinthy, basándose en la idea
de que el grupo de conocidos
de una persona crece expo-
nencialmente, propuso, el siglo
pasado, la teoría de los seis
grados de separación, que dice
que toda persona podría acce-
der a cualquier otra persona con
tan solo seis hasta cubrir toda la
población mundial (de los más
de 7.000 millones que somos).
Actualmente, con Internet se está
replanteando esta teoría, indi-
cando que con las aplicaciones
de la social media, con solo
cinco personas podríamos cubrir
o conocer a cualquier otra per-
sona del planeta.
¿Sabías que…?
4. ¿Qué opinas de la teo-
ría de los seis grados
de separación? ¿Estás
a favor o crees que es
imposible que se cumpla?
5. ¿Te consideras un prosu-
midor? ¿A través de qué
canales produces o con-
sumes información en la
Red?
6. ¿Tienes algún influencer
que sigas en la Red? ¿Por
qué lo sigues? ¿Cuántas
personas más crees que
lo siguen?
Actividades
Prosumidor o prosumer. Es un
nuevo término que procede de
la fusión de usuarios de la Red
que producen (producer) y con-
sumen (consumer) indistintamen-
te contenidos de Internet.
Influencers. Son personas famo-
sas o influyentes en la Red que
con sus comentarios a través de
sus blogs, tuits, redes sociales...
consiguen influir en una masa
social importante.
Vocabulario
Fig. 1.9. Conversación global en la social media.
17
1 Aplicaciones web sociales
2.2. Identidad digital
Cada año que va pasando, la presencia virtual de las personas y las empresas en la Red
es más importante. Lo que nos va a obligar, al igual que lo hacen las organizaciones, a
potenciar nuestra marca personal. En definitiva, a crear un valor añadido que podamosaportar a la conversación global y que en definitiva sea lo que nos permita en un futuro
no muy lejano entrar en el mercado laboral por la puerta grande. Con una reputación
digital labrada a lo largo de toda nuestra vida, al igual que hacemos en la vida real
con los estudios o las capacidades que vamos adquiriendo. Por ello, igual que estás
estudiando este ciclo para capacitarte como técnico informático, también tendrás que
demostrar al resto del planeta tu saber hacer (know how) a través de tus blogs, tuits, co-
mentarios y en definitiva tus aportaciones virtuales dentro de la social media. Teniendo
en cuenta, como dijo el gladiador Máximo Décimo Meridio «Lo que hacemos en la vida
tiene su eco en la eternidad», es decir, que la Red no olvida y todo lo que pongamos en
ella persistirá por siempre, hasta que alguna ley lo impida, pero de momento cuida tus
aportaciones para que sean positivas, tanto a nivel personal como profesional, ya que
es complicado separar ambos mundos en Internet.
A la hora de elegir el nombre de
usuario, hay que tener en cuenta
las limitaciones que tiene Internet
e incluso las que ha ido sacando
cada servicio, por ejemplo, en
Google solo se admite la utili-
zación de letras (a-z), números
y puntos. En Twitter se puede
utilizar el guión bajo, pero no el
guión. Mientras que a la hora de
registrar un dominio web propio,
cada vez se permiten más com-
binaciones. Todo esto se ha de
tener en mente para conseguir
un nombre de usuario válido en
todos ellos.
Claves y consejos
Creación de una imagen identificativa personal o corporativa adecuada para nues-
tro equipo de trabajo
Duración: 15 minutos Dificultad: fácil
Objetivo: poder disponer de un nombre de usuario o avatar que represente a nues-
tra empresa o a nosotros mismos.
Material y herramientas: disponer de un nombre de equipo de trabajo (según las
indicaciones del profesor) que formaréis como si fuerais una empresa, así como su
logotipo. Y el nuestro propio y una foto o dibujo que nos represente.
Utilidades: si no se quiere empezar publicando una foto personal, os podéis crear
un avatar o dibujo que se os parezca, por ejemplo, en el servicio http://www.
faceyourmanga.com o cualquier otro equivalente que no sea de pago, aunque
deberéis disponer de una cuenta de correo que os vais a crear en el siguiente Caso
práctico para daros de alta en este servicio.
Solución:
1. Como empresa, equipo de trabajo, tendréis que hacer una lluvia de ideas para
crearos un nombre de empresa, otro de usuario para todos los servicios web
que activéis y un símbolo o imagen que os represente.
2. A nivel individual, cada uno ha de decidir qué nombre de usuario quiere crearse
a partir de su nombre, por ejemplo, de Aplicaciones Web, que puede ser muy
largo, hemos optado por recortarlo con ApliWeb, pero como nos podemos encon-
trar con que este nombre ya está siendo utilizado por otra persona le hemos aña-
dido el año 2012 cuando lo hemos creado, teniendo como resultado de nombre
de cuenta apliweb2012. Tened en cuenta que es como vuestro bautizo en la Red,
el nombre que elijáis debería ser el mismo que utilicéis junto al vuestro personal
en todo lo que hagáis en Internet. Y, por último, debéis crearos un avatar que es
vuestra imagen identificativa. Los avatares pueden ser fotografías, dibujos artísti-
cos e incluso representaciones tridimensionales. Un buen tamaño de avatar puede
ser un cuadrado con un tamaño de 50 x 50 píxeles, aunque luego cada servicio
tiene su propio tamaño y nos planteará recortar la imagen según sus dimensiones.
Por lo que en primera opción te recomendamos que utilices una buena fotografía,
las de carnet suelen ser las mejores. Evitando que aparezcan otras personas, hay
que tener en cuenta que estamos vendiendo nuestra marca o producto, que somos
nosotros mismos, cuanto mejor sea esta imagen, mejor valorados estaremos.
Caso práctico 1
Aplicaciones web sociales1
18
Para ampliar estos temas os reco-
mendamos que leáis el artículo
«La gestión de la identidad digi-
tal: una nueva habilidad informa-
cional y digital» que está dispo-
nible en esta web: http://www.
ub.edu/bid/24/giones2.htm.
Web
2.3. Sistema de identificación global
Hoy en día, ya no basta con disponer de un dominio que nos identifique como empresa
o como persona, se ha de crear un identidad digital global y para ello se han ido crean-
do sistemas que han intentado crear un estándar, como OpenID, para unificar nuestra
información y no tener que estar continuamente registrándonos (y con ello dando nues-
tros datos personales cada vez, con los problemas de duplicidad de información que se
pueden crear y sobre todo del tiempo que nos puede llevar) en todos los servicios web
nuevos que van surgiendo en los que queramos estar. Y, aunque desde los organismos
se ha trabajado por desarrollarlo, al final se ha impuesto un estándar de hecho, como
es la utilización de cuentas de grandes compañías como:
Aunque también han surgido repositorios de identificación global en proyectos de soft-
ware libre como es el CMS WordPress que surgió inicialmente como un sistema de blog
(que se verá en profundidad en la segunda unidad) y utiliza Gravatar (Globally Recog-
nized Avatar) para tal fin.
Empresa Servicio de autentifi cación logo
Google Friend Connect
Facebook Connect o Sign In
Twitter Connect o Sign In
Yahoo Connect o Sign In
Microsoft net. Passport
Tabla 1.6. Sistemas de validación en servicios de terceros de grandes compañías.
7. ¿Cuántos servicios utilizas
habitualmente? ¿Cómo te
has registrado en ellos?
¿Utilizas la cuenta de
algún gran servicio para
autentificarte en otros ser-
vicios?
8. Date de alta en Twitter y
en Facebook utilizando
la cuenta de Google que
te has creado en el Caso
práctico 2. Si en tu cen-
tro tienes inhabilitadas
las redes sociales, intenta
hacerlo desde casa.
Actividades
Captcha. Acrónimo de Completely
Automated Public Turing Test to tell
Computers and Humans Apart.
Se trata de una prueba que per-
mite diferenciar entre humanos y
robots, y evitar que estos últimos
creen cuentas en los servicios.
Vocabulario
Para tener una contraseña segura:
• Utiliza una combinación de
mayúsculas, minúsculas, nú-
meros y signos de puntuación
como .!ӣ$%^&(.
• No uses palabras que figuren
en el diccionario.
• No emplees patrones de tecla-
do (asdf, 1234, etc.).
• No utilices información perso-
nal en la contraseña (nombre,
fecha de nacimiento, etc.).
Claves y consejos
Creación de una cuenta en Google
Duración: 5 minutos Dificultad: fácil
Objetivo: poder disponer de una cuenta Google tanto para el equipo de trabajo como
para cada miembro del mismo que nos permita abrir nuevos servicios en el futuro.
Material y herramientas: navegador web con conexión a Internet.
Solución:
Una cuenta de Google (Google Account) es una cuenta de usuario que nos permite
acceder a todos los servicios de Google. Estas cuentas se identifican por un nombre
de usuario, que se asocia a una dirección de correo. Entre los servicios a los que
podemos acceder con una cuenta de Google se encuentran Gmail, Google Calen-
dar, Google Groups, Google Doc, iGoogle, Google+, Blogger, Picasa o YouTube.
Aunque cada servicio puede tener una licencia de uso diferente, por lo que tendre-
mos que ir activando cada servicio la primera vez que lo utilicemos.
1. Para empezar podemos buscar en Google por «Cuentas Google» o ir direc-
tamente a la web: https://accounts.google.com/Login?hl=es. Si lo hiciésemos
desde cualquier servicio de Google como podría ser Gmail, el resultado obte-
nido sería el mismo.
Caso práctico 2
(Continúa)
19
1 Aplicaciones web sociales
2. En nuestro caso, vamos a crear en primer lugar una cuenta para el equipo de
trabajo y después cada miembro se creará la suya propia siguiendo las pautas
de la identidad virtual creada en el anterior Caso práctico.
3. A continuación, tendrás que introducir los datos personales asociados a la cuenta,
teniendo en cuenta queel nombre de usuario es lo único que nunca podrás
cambiar y será el identificador de la cuenta. Introdúcela junto con tu nombre
completo, la contraseña la tendrás que introducir por duplicado por motivos de
seguridad, ya que no se muestra mientras la introduces. El resto de campos son
opcionales y los podrás introducir en cualquier momento desde la configuración
de la cuenta. Solo te faltará repetir los caracteres del captcha que utiliza para
verificar que eres un humano, aceptar las condiciones del servicio y la política
de privacidad de Google. Y, por fin, haremos clic en el botón de Siguiente paso.
4. Nos dan la bienvenida. Ya hemos conseguido nuestro objetivo, a partir de este
momento podremos acceder a todos los servicios de Google e incluso a muchos
de terceras empresas con estos datos que hemos introducido.
5. Por último, sube tu imagen identificativa a la cuenta.
Caso práctico 2
(Continuación)
Fig. 1.11. Registro del usuario. Paso 1.
Introducción de los datos personales.
Fig. 1.10. Cuentas Google para entrar o crearse una nueva.
Fig. 1.12. Panel de confi guración de tu cuenta Google.
Aplicaciones web sociales1
20
Duración: 15 minutos Dificultad: fácil
Objetivo: poder realizar una búsqueda avanzada en la Web utilizando comandos
específicos para filtrar mejor los resultados.
Material y herramientas: los tres principales buscadores de Internet actualmente
siguen siendo Google, Yahoo y Bing dentro de Live de Microsoft; estos permiten en
sus búsquedas introducir unos comandos que nos van a ayudar a filtrar el número
de resultados para encontrar lo que realmente estamos buscando más fácilmente.
Utilidades: en el blog del libro tienes esta entrada: http://apliweb2012.wordpress.
com/2012/07/09/habilidades-digitales-segun-genis-roca/ o en su equivalente
enlace corto http://wp.me/p2A4BR-9, con nueve vídeos complementarios que te
ayudarán a sacar el máximo partido de tus búsquedas.
Solución:
1. Vamos a empezar con las opciones básicas, aprende cuáles son y aplica los
ejemplos poniendo tu nombre, a ver con qué resultados te sorprenden los dife-
rentes buscadores que utilices o te proponga tu profesor (Tabla 1.7).
2. Otras opciones que puedes utilizar para filtrar son limitar el ámbito de búsqueda
con órdenes avanzadas (Tabla 1.8).
Caso práctico 3
2.4. Habilidades digitales
Internet puede llegar a ser como un cajón de sastre o un gran agujero negro, si empe-
zamos a darnos de alta en servicios sin ningún criterio, porque están de actualidad,
posiblemente acabemos teniendo una huella digital poco organizada que arrastremos
a lo largo de toda nuestra vida. Por lo que como punto de partida desde este momento
deberíamos saber qué hemos hecho hasta ahora y qué sabe Internet de nosotros, esto se
denomina EgoSurfing, es decir, navegar o buscar toda la información sobre uno mismo.
Comentar que existen buscadores de identidades como Pipl.com, yasni.com o 123peo-
ple.es que están especializados en este tema.
9. Mediante las herramientas
web Pipl.com, yasni.com y
123people.es, realiza una
búsqueda de información
acerca de ti (EgoSurfing) o
de tus compañeros.
10. Busca cuáles podrían ser
las stop words en español.
Actividades
Cuando realizas una búsqueda
básica sin comillas, los propios
buscadores eliminan las denomi-
nadas stop words. Como son las
conjunciones o preposiciones. En
inglés serían estas: I, a, about, an,
are, as, at, be, by, com, de, en,
for, from, how, in, is, it, last, of,
on, or, that, the, this, to, was,
what, when, where, who, will,
with, un, the, www, etc.
¿Sabías que…?
(Continúa)
Órdenes Descripción Ejemplo
Palabra/s clave/s Muestra resultados asociados a estas palabras clave (keywords). Raül V. Lerma Blasco
“ “ Busca la frase exacta. “Raül V. Lerma-Blasco”
+
Equivaldría a un operador lógico (AND). Busca que contengan las palabras clave
marcadas. Algunas pueden ser ignoradas, las muy frecuentes como las stop words. Para
estas palabras podemos usar las “” para que las tenga en cuenta si fuesen necesarias.
Raül+V.+”Lerma-
Blasco”
* El asterisco sirve como comodín. Busca la frase exacta y la parte del * se sustituye por cualquier otra palabra. “Raül+*+Lerma-Blasco”
OR Busca que contengan alguna de las palabras clave. Raül OR “Lerma-Blasco”
- Excluye los que contengan la palabra marcada. Raül V. Lerma -Blasco
Tabla 1.7. Opciones básicas de búsqueda web.
Órdenes Descripción Ejemplo
site: Solo busca en el dominio indicado. site: www.mcgraw-hill.es
link: Muestra los enlaces que apuntan a un dominio o página. link: www.mcgraw-hill.es
intitle: Solo muestra las que tienen la palabra clave del texto dentro del título (title), pudiendo poner más de una entre paréntesis.
intitle: (”Aplicaciones
Web”,SMR)
inurl: Solo muestra las que tienen la palabra clave en la URL. inurl:”Aplicaciones Web”
Tabla 1.8. Opciones avanzadas de búsqueda web.
Búsquedas avanzadas
21
1 Aplicaciones web sociales
3. Cada día se inventan nuevas funcionalidades en los navegadores, como pue-
den ser utilizarlos como calculadoras, conversores de moneda, saber el tiempo
de tu ciudad o incluso buscar definiciones de términos (Tabla 1.9).
Puedes ver todas en inglés: http://www.google.com/intl/en/help/features.html
o en español: http://www.google.com/intl/es/help/features.html.
Puedes encontrar algunas opciones más en: http://www.comandosdebusqueda.
com/buscar/google, intenta probar el mayor número de ellos, te sugerimos el rela-
cionado con la búsqueda de archivos por su extensión.
Caso práctico 3
(Continuación)
Ahora que ya sabemos sacar mayor partido de nuestras búsquedas en Internet, otra
opción interesante puede ser suscribirse utilizando la tecnología RSS o ATOM (busca de-
fine RSS en tu buscador) a las noticias o los blogs que más nos interesen. Consiguiendo
un ahorro de tiempo al ser la información la que vendrá a nosotros y no al revés, como
hasta ahora que teníamos que ir consultando sitio por sitio si había alguna novedad.
Organizar tus fuentes de información con un lector RSS/ATOM
Duración: 10 minutos Dificultad: fácil
Objetivo: poder centralizar mediante RSS nuestras mejores fuentes de información.
Material y herramientas: las herramientas que nos permiten hacer una gestión más
adecuada de estos recursos son lectores de RSS, como Google Reader, Bloglines,
MyYahoo!, Netvibes o FeedReader.
Utilidades: en nuestro caso, como ya disponemos de una cuenta de Google, utiliza-
remos Google Reader.
Caso práctico 4
Dispones de un Caso práctico
denominado firefox-addons-brief.
pdf que te explica cómo agre-
gar el complemento brief que
sirve como un lector de RSS.
CEO
El Google Gacking consiste en
una técnica de obtención de
información potencialmente con-
fidencial a través de las herra-
mientas de búsqueda de Google.
¿Sabías que…?
Órdenes Descripción Ejemplo
defi ne + término Devuelve defi niciones del término buscado. defi ne RSS
weather + localidad Devuelve la previsión de tiempo para la localidad. weather valencia
Moneda en moneda Devuelve el cambio actual entre ambas monedas. euros en dolar
Tabla 1.9. Opciones avanzadas complementarias de búsqueda web.
Fig. 1.13. Grupos preestablecidos de Google Reader.
Solución:
1. Vamos a ir a www.google.es/reader y nos
autenticaremos.
2. Una vez dentro, la manera de empezar más
rápida es suscribirte a grupos de feeds que
nos sugiere el propio lector, ve a Examinar
cosas.
3. Haz que te muestre todos los grupos de que
dispone Google y suscríbete en el de Fire-
fox.
4. Ya podrás empezar a leer las noticias que
el lector te traerá a tu suscripción.
5. Ahora busca una fuente de información que
te guste y suscríbete a ella.
Aplicaciones web sociales1
22
Fig. 1.14. Logo de Bluefi sh.
Fig. 1.15. Icono de Coda.
3. Diseño web
En el siguiente epígrafe vamos a abordar el diseño de páginas web mediante HTML y
CSS, y veremos algunos servicios on-line para la creación y publicación de sitios web.
Como hemos comentado anteriormente, el lenguajeHTML surgió de la necesidad de
representar y relacionar documentos de hipertexto, y poder comunicarlos a través del
protocolo HTTP. Al mismo tiempo que ha ido evolucionando la Web y el uso que se le
ha dado, el lenguaje HTML ha evolucionado con ellos, dando lugar a diferentes versio-
nes o estándares del mismo, introducidos inicialmente por el IETF y posteriormente por
el W3C.
3.1. Entornos
Las páginas web son documentos de texto plano, cuyo código HTML es interpretado por
el navegador web. Aunque, para la edición de estas páginas, bastaría con un simple
editor de texto, existen aplicaciones y entornos específicos para tal fin, con diferentes
grados de complejidad.
Veamos una sencilla clasificación de estos entornos:
• Editores de texto plano. Se trata de editores de texto bastante simples, como pueden
ser el bloc de notas en Windows, o gedit y Kate para GNU/Linux. Algunos de ellos
incluyen características de coloreado de etiquetas, e incluso botones para insertar las
etiquetas directamente. Entornos más completos, como Dreamweaver, Komodo Edit o
Aptana nos permiten gestionar proyectos complejos, con múltiples ficheros de diferen-
tes tipos, e incluso soportar frameworks de desarrollo.
En la página de W3Schools
dispones de un tutorial muy com-
pleto sobre HTML con ejemplos
on-line incluidos. Puedes encon-
trarlo en: http://www.w3schools.
com/html/default.asp.
Web
Estándar Publicado en... Algunas características...
HTML 2.0
(IETF)
1995
Estándar inicial (no existe versión 1.0).
La declaración de elementos de estructura (html, head y body) es opcional.
Sin soporte para tablas.
HTML 3.2
(W3C)
1997
Simplifi cación del HTML 3.0 propuesto por IETF.
Su elaboración por parte de compañías como Netscape, Microsoft, IBM o Sun, dio lugar al
nacimiento del W3C.
Incluye soporte para applets, mayor versatilidad en la disposición del texto y las imágenes, y
añade las tablas.
HTML 4.0 1997 Estandariza los marcos, las hojas de estilo CSS y los scripts, incluye más soporte multimedia y mejoras de accesibilidad, entre otras cosas.
HTML 4.01 1999
Es la más usada actualmente.
Compatible con la mayoría de navegadores. Dispone de tres subestándares: Strict, Transitio-
nal, y Frameset.
HTML 4.01 Strict No se aceptan etiquetas obsoletas (deprecated) de estándares anteriores.
HTML 4.01 Transitional Permite el uso de todo tipo de etiquetas, aunque sean obsoletas.
HTML 4.01 Frameset Da soporte a frames.
XHTML 1.0 2000 Surge como una combinación de XML y HTML.
XHTML 1.1 2001 Elimina el soporte para marcos y elementos obsoletos, siendo más o menos equivalente a HTML 4.01 Strict.
HTML 5.0 2014 Incluye muchas novedades, entre las que destacan nuevas etiquetas semánticas y un mayor soporte e integración de contenidos multimedia.
Tabla 1.10. Versiones de HTML.
23
1 Aplicaciones web sociales
Fig. 1.16. Logo de Dreamweaver CS6.
Fig. 1.17. Logo de BlueGriffon.
• Editor de texto con ventanas desdobladas. Muestran el resultado en tiempo real de la
interpretación del código HTML en una ventana adyacente a la del código que esta-
mos escribiendo. Es una opción bastante cómoda para no tener que guardar cada
vez las páginas y abrirlas con el navegador.
Ejemplos de estos editores los encontramos en Bluefish, BlueGriffon en LinuX o Coda
para MAC.
• Editores WYSIWYG (What You See Is What You Get, «lo que ves es lo que tienes»).
Ofrecen la posibilidad de trabajar directamente con el resultado de la página, como
si de un procesador de textos se tratase. El propio editor se encargará de la ge-
neración del documento HTML. Aunque ampliamente difundidos, estos editores han
sido criticados por generar páginas de poca calidad, y han dado lugar a editores
WYSIWYM (What You See Is What You Mean, «lo que ves es lo que quieres decir»),
donde el usuario introduce los contenidos de forma estructurada, siguiendo su valor
semántico (un título, una sección...), en lugar de su representación final. Algunos edi-
tores WYSIWYM son WYMean Editor o WebCS Editor. Dentro de los editores WY-
SIWYG podemos destacar Amaya (creado por la W3C), KompoZer o Dreamweaver
(para entornos MS, con licencia), entre muchos otros.
• Editores on-line. Otro tipo de editores son los que nos permiten la edición de código
HTML directamente sobre el navegador, facilitando así la subida al servidor y colabo-
rar con otras personas. Generalmente utilizan coloreado de código y autotabulación,
y aunque no se trate de entornos para desarrollar grandes sitios son de gran utilidad
para experimentar con HTML, CSS y JavaScript, viendo el resultado a medida que se
escribe, así como para compartir código.
Algunos de estos sitios son Tinkerbin (http://tinkerbin.com/) que permite editar y com-
binar HTML, CSS y Javascript, CSSDesk (http://cssdesk.com/), orientado a la edición
HTML y CSS, JSFiddle (http://jsfiddle.net/), que ofrece además librerías como Mootols
o jQuery, JSBin (http://jsbin.com/), también con la posibilidad de incrustar diferentes
librerías JQuery, o Dabblet (http://dabblet.com/), que permite guardar nuestras mues-
tras directamente en GitHub.
3.2. XHTML
Las páginas web no son más que documentos escritos en el lenguaje de marcas HTML,
que utiliza etiquetas o marcas junto con el texto, que contienen información sobre su
estructura o formato.
Las etiquetas en HTML se indican entre los símbolos < y >, y generalmente, van por pa-
res: etiqueta de apertura <etiqueta> y de cierre </etiqueta>. El texto entre ambas
etiquetas es el que se ve afectado por ellas. A este conjunto de par de etiquetas y con-
tenido se le conoce como elemento HTML. Además, las etiquetas pueden ir anidadas.
Esto quiere decir que, dentro del texto contenido entre dos etiquetas, puede haber otros
pares de etiquetas, o, lo que es lo mismo, un elemento HTML puede contener otros ele-
mentos HTML.
11. Descarga Bluegriffon desde http://bluegriffon.org/
pages/Download e instálalo en tu ordenador.
Escribe algún documento desde la vista Diseño y añá-
dele formato desde la barra de herramientas.
Una vez hecho, observa el código HTML generado,
mediante la vista Código Fuente.
12. Accede a la página de Tinkerbin (http://tinkerbin.com/)
y copia en la sección HTML el ejemplo de la Figura 1.18.
Observa el resultado final. Cópialo también en un docu-
mento de texto con tu editor de texto favorito (gedit, note-
pad), y ábrelo con un navegador para ver el resultado.
Actividades
Algunos elementos HTML pue-
den mostrarse correctamente en
algunos navegadores, aunque
no se cierre la etiqueta que los
contiene, pero, en otros, puede
mostrar resultados inesperados.
Por este motivo, es convenien-
te ceñirse siempre a las reco-
mendaciones marcadas por los
estándares.
¿Sabías que…?
Aplicaciones web sociales1
24
Estructura de una página HTML
Las páginas HTML tienen un formato bien definido y siguen el siguiente esquema de la
Figura 1.18. En ella podemos apreciar los siguientes elementos:
1. La declaración de documento HTML con DOCTYPE.
2. Elemento html, que describe la página propiamente dicha, y es definido entre las
etiquetas <html> y </html>.
3. Elemento head, que contiene la cabecera del documento. Esta cabecera contiene
información acerca del documento, tal como enlaces a hojas de estilo, metainforma-
ción, pero no tiene que ver con la cabecera que vemos en el resultado de la página.
4. Comentarios, indicados entre los símbolos <!-- y -->.
5. Elemento body, con el cuerpo en sí de la página y que contiene los elementos nece-
sarios para su visualización. En su contenido tenemos aquellos elementos que nos
ayudan a organizar y formatear la página, tales como cabeceras, párrafos, etc.
Elementos y atributos HTML
Como ya dijimos, un elemento HTML es todo aquello contenido entre una etiqueta de
apertura y una etiqueta de cierre. Además, un elemento HTML puede contener dentro
otros elementos HTML anidados, tal y como pudimos ver en la Figura 1.18.
La sintaxis de los elementos HTML sigue las siguientes reglas:
1. Los elementos HTML empiezancon una etiqueta de apertura <etiqueta> y terminan
con una etiqueta de cierre </etiqueta>.
2. Puede haber elementos HTML que no tengan contenido, elementos vacíos. En este
caso, para respetar el estándar XHTML, toda etiqueta que se abra debe cerrarse,
puede abreviarse con una sola etiqueta <etiqueta/>.
Por otra parte, algunos de estos elementos pueden necesitar información adicional. Los
atributos proporcionan esta información acerca de los elementos HTML, y se especifican
siempre en la etiqueta de inicio mediante pares nombre=”valor”. Veámoslo con un par
de ejemplos:
Ejemplo 1: la etiqueta <img> inserta una imagen en el documento. El atributo src indica
la ruta hacia la imagen, así como los atributos width y height, que indican el ancho
y alto de la imagen.
<img src=”logo.png” width=”300” height=”200”/>
y alto de la imagen.
<img src=”logo.png” width=”300” height=”200”/>
Ejemplo 2: la etiqueta <a>, utilizada para introducir enlaces, necesita del atributo href
para indicar la dirección a la que hace referencia el enlace. En este caso, el texto «Haz
clic para ver mi web» será un enlace a la página http://alumnosmr.weebly.com.
<a href=”http://alumnosmr.weebly.com/”>
Haz clic para ver mi web
</a>
clic para ver mi web» será un enlace a la página http://alumnosmr.weebly.com.
<a href=”http://alumnosmr.weebly.com/”>
Haz clic para ver mi web
</a>
Veamos en las siguientes tablas-resumen los principales elementos HTML, junto con su
descripción y algunos ejemplos.
Elementos básicos para definir la estructura de los documentos
Elemento Versión Descripción
<html></html> HTML 2.0 Elemento raíz de un documento HTML.
<head></head> HTML 2.0 Contiene información sobre los metadatos de un documento HTML.
<body></body> HTML 2.0 Contiene el contenido a mostrar en el documento HTML.
Tabla 1.11. Elementos básicos para defi nir la estructura de los documentos.
En la página del w3schools,
http://www.w3schools.com/
html/html_forms.asp, tienes un
amplio tutorial sobre formularios
en HTML.
Web
HTML no distingue entre mayús-
culas y minúsculas, tanto en
etiquetas HTML como en sus
atributos. Aun así, el W3C reco-
mienda el uso de minúsculas,
tanto para las etiquetas como los
atributos en HTML 4 y exige su
uso en XHTML.
La sintaxis de los atributos reco-
mienda que los valores apa-
rezcan siempre entre comillas,
generalmente dobles, aunque
también se permiten las comillas
simples (por ejemplo, si el conte-
nido tiene comillas dobles).
Claves y consejos
Fig. 1.18. Esquema de una página web.
<DOCTYPE html>
<html>
</html>
<head>
<! - - Cabecera del doc. - ->
</head>
<body>
</body>
<h1>Esto es una cabecera</h1>
<p> Esto es un párrafo</p>
<p>
Esto es un párrafo con
un <b>texto en negrita </b>
</p>
25
1Aplicaciones web sociales
Elementos de la cabecera <head>
Elementos del cuerpo de la página
Según la forma de visualizar los elementos del cuerpo de la página, estos pueden ser
en bloque o en línea.
Los elementos de bloque se muestran como objetos rectangulares, con márgenes, altura
y ancho independientes de sus elementos circundantes.
Los elementos en línea son tratados como parte del flujo de texto, sin márgenes, alto o
ancho, e insertando saltos de línea cuando se llega al final. Estos elementos no pueden
ser insertados directamente dentro del body, sino que deben estar dentro de un elemen-
to de bloque.
Elemento Versión Descripción
<base></base> HTML 2.0 URL a partir de las cuales se construyen las referencias href de la página y otros enlaces.
<link></link> HTML 2.0 Incluye otros documentos enlazados, tales como hojas de estilo o scripts.
<script>
</script> HTML 3.2
Especifica un elemento de tipo script, para añadir comportamiento a la página.
Atributos: src.
<style></style> HTML 3.2 Especifica un estilo para el documento. Puede indicarse en este elemento o enlazarse a un fichero CSS.
<title></title> HTML 2.0 Define el título del documento, que será mostrado por el navegador como título de la ventana en que se muestra. Algunos buscadores web suelen fijarse en esta etiqueta para indexar nuestras páginas.
<meta></meta> HTML 2.0
Especifica información adicional sobre el documento, mediante atributos como name y content. En
los siguientes ejemplos hemos introducido una descripción a la página, y una lista de palabras clave,
respectivamente, que facilitarán la indexación de contenidos a los motores de búsqueda.
<meta name=”description” content=”Ejemplo para Aplicaciones Web”>
<meta name=”keywords” content=”APW, Web, SMR, HTML, CSS”>
Tabla 1.12. Elementos de la cabecera <head>.
Elementos de bloque
Elemento Versión Descripción
<p></p> HTML 2.0 Introduce un párrafo en la página. Es de los elementos más utilizados.
<h1></h1>
…
<h6></h6>
HTML 2.0 Añade títulos de secciones a diferentes niveles: <h1> delimita los títulos de mayor nivel, el siguiente nivel es <h2> y así hasta <h6>.
<ol></ol>
<ul></ul>
<li></li>
<dl></dl>
<dt></dt>
<dd></dd>
HTML 2.0
Define diferentes tipos de listas y sus elementos:
• <ol></ol> define listas ordenadas.
• <ul></ul> define listas no ordenadas.
• <li></li> define los elementos para las listas <ol> y <ul>.
• <dl></dl> define una lista de definiciones.
• <dt></dt> define un término en una lista <dl>.
• <dd></dd> define la definición de un término en la lista <dl>.
<div></div> HTML 3.2
Define una división lógica del contenido a nivel de bloque. Se trata de un elemento genérico sin valor
semántico, y se utilizan para distinguir secciones del documento con diferentes formatos o comporta-
mientos.
<hr/> HTML 2.0 Introduce una regla horizontal.
Aplicaciones web sociales1
26
Elementos inline
Elemento Versión Descripción
<a></a> HTML 2.0
Permite añadir enlaces dentro del documento o a sitios web externos, mediante el atributo href
(hypertext reference) y la URL del sitio o referencia interna. Además, mediante el atributo «title»
podemos añadir información sobre el enlace.
<a href=”www.gmail.com” title=”Correo gmail”>Mi Correo</a>
<abbr></abbr> HTML 4.0 Indica el texto como una abreviatura.
<dfn></dfn> HTML 3.2 Indica la definición en línea de un término.
<em></em> HTML 2.0 Enfatiza un texto en cursiva.
<strong></strong> HTML 2.0 Enfatiza un texto en negrita.
<span></span> HTML 4.0
Describe una división lógica en línea. Un elemento sin significado semántico que distingue una sec-
ción del documento, con aspecto o comportamiento específico. Sería el equivalente, en línea, a los
elementos <div> de bloque.
<br/> HTML 2.0 Fuerza un retorno de carro que pasa a la línea siguiente.
<cite></cite> HTML 2.0 Referencia a una cita en el documento.
<del></del> HTML 4.0 Define un texto como eliminado. Genialmente se muestra como tachado.
<ins></ins> HTML 4.0 Marca el texto como insertado. Se suele mostrar como subrayado.
<sub></sub>
<sup></sup>
HTML 3.2 Marca el texto como subíndice (sub) o superíndice (sup).
Tabla 1.13. Elementos del cuerpo de la página.
En los siguientes ejemplos, podemos ver algunos de los elementos descritos anteriormen-
te en acción.
En este ejemplo utilizamos las etiquetas de título <h1>...<h6> para ver diferentes tipos
de títulos que podemos utilizar.
Como podemos ver, en este ejemplo, hemos introducido varios tipos de lista, y podemos
comprobar cómo podemos definir listas dentro de otras listas, tal y como hemos hecho
a modo de ejemplo con la lista no ordenada.
Ejemplo: listas
<html> <body>
<!-- Veamos algunos elementos de bloque de
tipo listas -->
<h1>Lista ordenada</h1>
<ol>
<li>Elemento Ordenado 1</li>
<li>Elemento Ordenado 2</li>
</ol>
<h1>Lista no ordenada</h1>
<ul>
<li>Elemento 1</li>
<ul><li>Subelemento 1.1</li>
<li>Subelemento 1.2</li> </ul>
<li>Elemento 2</li>
</ul>
<h1>Lista de definiciones.</h1>
<dl>
<dt>Concepto 1</dt>
<dd>Definición 1</dd>
<dt>Concepto 2</dt>
<dd>Definición 2</dd>
</dl>
</body> </html>
Ejemplo: títulos
<html> <body>
<!-- Veamosalgunos elementos de bloque de
tipo títulos-->
<h1>Esto es un ejemplo de título de primer
nivel</h1>
<h2>Esto es un ejemplo de título de segundo
nivel</h2>
<h3>Esto es un ejemplo de título de tercer
nivel</h3>
<h4>Esto es un ejemplo de título de cuarto
nivel</h4>
<h5>Esto es un ejemplo de título de quinto
nivel</h5>
<h6>Esto es un ejemplo de título del último
nivel</h6>
</body> </html>
27
1Aplicaciones web sociales
Como vemos, dentro de un bloque podemos definir diferentes secciones de elementos
de línea, tales como las negritas o la letra cursiva.
Elementos de tipo imagen
Ejemplo: inserción de imágenes
<html><body>
<h1>Ejemplo de imagen</h1>
<img src=”http://alumnosmr.weebly.com/files/theme/default _ header.jpg” width=”400px” height=”180px” />
</body></html>
En este ejemplo, se ha insertado una imagen a través de su URL, y se le ha especificado
un ancho de 400 píxeles y un alto de 180 píxeles.
Elementos para tablas
Debes tener en cuenta que lo que fija la estructura de las tablas son las etiquetas tr, th
y td, por lo que no es necesario introducir toda una fila en la misma línea, por ejemplo,
la línea: <tr> <td>Firefox</td> <td>29%</td> </tr>
se podría escribir como:
<tr>
<td>Firefox</td>
<td>29%</td>
</tr>
Elemento Versión Descripción
<img></img> HTML 2.0
Inserta una imagen en el documento. Permite los siguientes atributos:
src=”URL”, para indicar la URL de la imagen.
alt=”Texto”, con un texto alternativo cuando la imagen no puede mostrarse.
width=”tamaño”, que especifica el ancho de la imagen.
height=”tamaño”, que especifica el alto de la imagen.
Tabla 1.14. Elementos de tipo imagen.
Elemento Versión Descripción
<table></table>
<tr></tr>
<th></th>
<td></td>
HTML 4.0
El elemento <table> indica que vamos a insertar una tabla en el documento. Las tablas se utilizan para mostrar
información de forma tabular. Aunque se han utilizado también para organizar el contenido de las páginas,
su uso para este fin no está recomendado, ya que para ello disponemos de los elementos de bloque <div>.
Las tablas se construyen por filas, y dentro de cada fila especificaremos las celdas que tiene. Utilizaremos
las siguientes etiquetas:
• <tr></tr>, table row, para indicar un elemento de fila de tabla.
• <th></th>, table header, para delimitar las celdas de la cabecera.
• <td></td>, table data, para delimitar las celdas de la tabla.
Tabla 1.15. Elementos para tablas.
Ejemplo: tablas
<html><body>
<h1>Navegadores más utilizados en Europa</h1>
<h3>Mayo de 2012</h3>
<table border=”1”>
<tr> <th>Navegador</th> <th>% de uso</th> </tr>
<tr> <td>Chrome</td> <td>31%</td> </tr>
<tr> <td>Firefox</td> <td>29%</td> </tr>
<tr> <td>Internet Explorer</td> <td>27%</td>
</tr>
</table>
</body></html>
Ejemplo: elementos en línea
<html> <body>
<p> Como sabemos, un elemento de línea
debe estar contenido dentro de un elemento
de tipo bloque, como el actual párrafo.
Dentro de un párrafo, como ves, no se
producen saltos de línea si no utilizamos
la etiqueta<br>.
<br> Además, podemos <em>enfatizar el texto
en cursiva</em> o bien <strong>en negrita
</strong> </br> </p>
</body> </html>
Aplicaciones web sociales1
28
Edición de una página web completa con un editor de escritorio
Duración: 30 minutos Dificultad: media
Objetivo: tomar contacto con las herramientas de desarrollo web de escritorio.
Material y herramientas: necesitaremos el IDE Geany, disponible en los repositorios de Ubuntu.
Solución:
Geany es un editor de texto con las características de un entorno de desarrollo. Concebido como un IDE pequeño y
rápido, soporta varios tipos de ficheros, entre ellos HTML y CSS, y otras características interesantes, como el coloreado,
inserción automática de etiquetas de cierre y la asociación de etiquetas.
1. Instalación. Geany se encuentra por defecto en los repositorios de Ubuntu y las principales distribuciones GNU/Linux,
y para Windows puede descargarse desde http://www.geany.org/Download/Releases. Para instalar Geany en Ubuntu
deberemos usar la orden sudo apt-get install geany desde la consola, o bien instalarlo directamente desde la herra-
mienta Synaptic.
2. Creación de la plantilla. Una vez instalado, podemos generar una plantilla de página web, desde la opción de menú
Archivo > Nuevo (desde plantilla) > file.html. Como podremos comprobar, es una plantilla que ya añade bastantes
cosas al código.
3. Creación de la página web. Una vez generado el archivo de plantilla, rellenaremos la página con el código siguiente:
4. Una vez creada la página, la guardamos como mi_página.html en nuestra carpeta, y la abrimos con el navegador
web.
Caso práctico 5
Ejemplo: tablas
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd”>
<html>
<head>
<title>sin título</title>
<meta http-equiv=”content-type”
content=”text/html;charset=utf-8” />
<meta name=”description” content=”Caso
práctico para APW” />
<meta name=”keywords” content=”web, apw,
html” />
</head>
<body>
<h1>Horario de segundo curso de SMR</h1>
<img src=”http://tinyurl.com/c9cwrt8” />
<h3>Alumno: AlumnoSMR</h3>
<h3><a link href=”http://alumnosmr.weebly.
com/”>Mi página web...</a></h3>
<table>
<tr>
<th>Lunes</th> <th>Martes</th>
<th>Miércoles</th> <th>Jueves</th>
<th>Viernes</th>
</tr>
<tr>
<td>APW</td> <td>ING</td>
<td>APW</td> <td>EIE</td>
<td>SER</td>
</tr>
<tr>
<td>SEG</td> <td>SER</td>
<td>SOR</td> <td>SOR</td>
<td>SEG</td>
</tr>
</table>
<h2>Listado de Módulos:</h2>
<ul>
<li>
<strong>APW:</strong><em>Aplicaciones
Web</em>
</li>
<li>
<strong>SER:</strong><em>Servicios en
red</em>
</li>
<li>
<strong>SEG:</strong><em>Seguridad
Informática</em>
</li>
<li>
<strong>SOR:</strong>
<em>Sistemas Operativos en Red</em>
</li>
<li>
<strong>EIE:</strong>
<em>Empresa e Iniciativa Emprendedora</em>
</li>
<li>
<strong>ING:</strong><em>Inglés</em>
</li>
</ul>
</body>
</html>
29
1 Aplicaciones web sociales
Formularios
Los formularios HTML se utilizan para proporcionar información por parte del usuario, y
bien enviar esta a la aplicación web, para su procesamiento, o enviarse por correo a un
destinatario. Los formularios pueden tener elementos de diferentes tipos, tales como cam-
pos o áreas de texto, botones de radio, checkboxes, entre otros y botones para enviar los
datos. Veamos las principales etiquetas utilizadas en HTML para manipular formularios:
El siguiente código muestra un formulario en HTML que envía los resultados por correo
electrónico.
Ejemplo:
<html><head>
<meta http-equiv=”content-type” content=”text/
html;charset=utf-8” />
</head>
<body>
<form action=”mailto:alumnoAPW2013@gmail.com” method=”get”>
Nombre de usuario: <input type=”text” name=”name” /><br />
Contraseña: <input type=”password” name=”pwd” /><br />
<br/><fieldset>
<legend>Intereses</legend>
<input type=”radio” name=”genero” value=”hombre” /> Hombre<br />
<input type=”radio” name=”genero” value=”mujer” /> Mujer
</fieldset><br/>
<fieldset>
<legend>Intereses</legend>
<input type=”checkbox” name=”interes” value=”web” />
Aplicaciones web<br />
<input type=”checkbox” name=”interes” value=”prg” />
Programación<br />
<input type=”checkbox” name=”interes” value=”lin” /> Linux<br />
<input type=”checkbox” name=”interes” value=”mac” /> Mac<br />
<input type=”checkbox” name=”interes” value=”and” /> Android
</fieldset>
<input type=”submit” value=”Submit” />
</form>
</body></html>
13. Accede a la página de
Tinkerbin (http://tinkerbin.
com/) y comprueba el
resultado de los ejemplos
de esta sección del tema.
Prueba con algunas de
las otras etiquetas que se
han descrito, y observa
el resultado <hr, dfn,
abbr>...
14. Escribe los ejemplos ante-
riores en Tinkerbin y com-
prueba su resultado.
15. Después de realizar el
Caso práctico 5, perso-
nalízalo con tu nombre,
imagen, enlace favorito,
tu horario de clases y la
lista de módulos. Puedes
cambiar el tipo de lista
a numerada,o lista de
definiciones para indicar
los módulos. Recuerda
también que en el atri-
buto url de la etiqueta
img puedes referenciar a
una imagen de tu equipo
mediante file://.
Actividades
Elementos para formularios
Elemento Descripción
<form></form> Defi ne un formulario. En el atributo action, indicaremos dónde enviar la información.
<input></input> Defi ne una entrada para una línea de texto (type=”text”), o bien un password (type=”pasword”).
<textarea></textarea> Defi ne un área de texto amplia.
<label></label> Defi ne una etiqueta.
<fieldset></fieldset> Defi ne un conjunto de elementos agrupados dentro de un borde.
<legend></legend> Defi ne la etiqueta de un fi eldset.
<select></select> Defi ne una lista de opciones.
<optgroup></optgroup> Defi ne un grupo de opciones relacionadas con una lista de selección.
<option></option> Defi ne una opción dentro de un select.
<button></button> Defi ne un botón, bien para enviar el formulario (type=”submit”) o para limpiarlo.
Tabla 1.16. Elementos de formulario.
Aplicaciones web sociales1
30
3.3. CSS
Cuando hablamos de estilos en una página web, nos referimos a cómo se muestran sus
elementos HTML. Los estilos se añadieron en HTML 4.0 con el fin de separar el contenido
de las páginas de su aspecto.
Las hojas de estilo en cascada (Cascading Style Sheets – CSS) son documentos que nos
sirven para definir una serie de estilos a aplicar sobre determinada página, ahorrando
mucho trabajo. Una hoja de estilos CSS está formada por un conjunto de reglas, forma-
das por selectores y un bloque de estilos, con el formato que se aplicará a los elementos
del documento que coincidan con cierto selector. Estos bloques de estilo se definen entre
llaves, y están formados por declaraciones de pares del tipo propiedad: valor. Veámoslo
esquemáticamente:
Selectores en CSS
Los selectores marcan qué elementos se verán afectados por cada estilo, pudiendo afec-
tar a varios elementos a la vez. Para indicar los elementos que se verán afectados por
cierto estilo, lo podemos hacer de varias formas:
1. A través del tipo de elemento, indicando como selector el elemento HTML.
2. A través de su clase (atributo HTML class), en cuyo caso el selector será el nombre de
la clase precedida del punto (.).
3. A través de su identificador (atributo HTML id), en cuyo caso el selector consistirá en
el id precedido de la almohadilla (#).
Ejemplo: HTML y CSS
Documento HTML
<html>
<body>
<h1 class=”mititulo”>
Primer ejemplo en CSS</h1>
<p>Esto es un párrafo normal
</p>
<p id=”miparrafo”>
Y esto es mi párrafo
personalizado</p>
</body>
</html>
CSS asociado
body{
background-color: yellow;
font-family: ubuntu,arial,
sans-serif;
}
.mititulo{
font-size: 30px;
background-color: #ffffff;
}
#miparrafo{
font-style:italic;
}
Como puedes observar, hemos añadido diferentes estilos de fuente y colores para nues-
tros elementos. Fíjate que cuando referenciamos un color podemos hacerlo a través de
su nombre (yellow, por ejemplo), o bien a través de sus componentes RGB (siglas de Red,
Green y Blue) indicadas en forma hexadecimal (#FFFFFF).
Ejemplo:
En la siguiente definición, se muestra
un párrafo con estilo:
<p style=”color: blue;
font-weight: bold”>
Hola!</p>
Con esto haremos que el texto del
párrafo sea en negrita y en color
azul.
16. Prueba el ejemplo ante-
rior en el editor de Tinker-
bin y comprueba su resul-
tado.
Actividades
Igual que en HTML, existen dife-
rentes estándares de CSS que
han ido mejorando los anteriores
y añadiendo nuevas funciona-
lidades. En la actualidad, pue-
den usarse perfiles para móviles,
impresoras o televisores.
Versiones de CSS:
• CSS1 (1995-2008). Contem-
pla: fuentes, colores, alinea-
ción, espaciado, cajas, lis-
tas...
• CSS2 (1998-2008). Capas,
posicionamiento, texto bidi-
reccional, sombras...
• CSS2.1(2011). Con mejoras
sobre versiones anteriores.
• CSS3 (en desarrollo). Que
añade nuevas funcionalida-
des en forma de módulos,
como propiedades para los
bordes, mejoras en los fon-
dos, transparencia, sombras
del texto, degradados...
¿Sabías que…?
Fig. 1.19. Declaración de bloque en CSS. Los elementos del tipo título <h1> se mostrarán en amarillo
y con un tamaño de 20 píxeles.
h1 { color: yellow; font-size: 20px; }
Selector
Declaración
Propiedad Valor ValorPropiedad
Declaración
31
1 Aplicaciones web sociales
17. Después de realizar el
Caso práctico como ejem-
plo, y consultando la
página del W3Schools
sobre CSS, añade nuevos
estilos a tu página, tales
como imágenes de fondo
en el body, color de
fondo de las tablas, etc.
Actividades
Podemos utilizar múltiples fuen-
tes de estilos. Cuando esto ocu-
rre y se han definido varias pro-
piedades para un mismo selec-
tor, este hereda las propiedades
de los estilos más generales a
los estilos más específicos.
Por ejemplo, se referencia a
una hoja externa con:
p { color:red;
text-align:left;
font-size:12pt; }
Y definimos otra interna con:
p { text-align:right;
font-size:18pt; }
El estilo a aplicar a los ele-
mentos de tipo p será:
color:red; (hereda de
hoja ext.)
text-align:right;
(hoja int.)
font-size:18pt; (hoja
int.)
¿Sabías que…?
Dónde ubicar el CSS
Podemos asociar las hojas de estilo a nuestra página de diferentes modos: en línea,
como una hoja interna o como una hoja externa.
• Añadir estilos en línea. Consiste en añadir directamente los estilos a un elemento
HTML a través de la propiedad style. En este caso, no debemos añadir ningún se-
lector, ya que el estilo se añade directamente al elemento:
<h1 style=”background-color: blue; text-color: white;”>...
Los estilos en línea suelen utilizarse cuando un estilo se aplica únicamente a un ele-
mento.
• Añadir definiciones de estilos como una hoja interna. Se utilizan cuando ciertos estilos
se aplican únicamente a los elementos de una página. Los estilos se definen en la
cabecera de la página mediante la etiqueta <style> del siguiente modo:
<head><style type=”text/css”>
p {color:#ffffcc; margin-left: 20px;}
body {background-image: url (“images/background.png”);}
</style></head>
• Añadir estilos en una hoja externa. Es la forma ideal cuando queremos aplicar un
estilo común a varias páginas. Definiremos nuestros estilos en un fichero con extensión
.css que enlazaremos mediante la etiqueta <link> en la cabecera de la página del
siguiente modo:
<head>
<link rel=”stylesheet” type=”text/css” href=”miestilo.css” />
</head>
Añadiendo estilos a una página web
Duración: 30 minutos Dificultad: media
Objetivo: aplicar estilo a nuestra página.
Solución:
1. Siguiendo con la página creada anteriormente, vamos a añadir algunos cam-
bios para que resulte más atractiva. Crearemos el siguiente fichero miestilo.css
en la misma carpeta que tenemos nuestra página:
2. Además, haremos un par de cambios en nuestra página web:
• Añadiremos como última línea del head el enlace al fichero CSS:
<link rel=”stylesheet” type=”text/css” href=”miestilo.css” />
• Modificaremos la línea <h3>Alumno: AlumnoSMR</h3> para añadirle el
id: <h3 id=”alumno”>Alumno: AlumnoSMR</h3>
3. Hecho esto, volvemos a abrir nuestra página y comprobaremos el resultado.
Caso práctico 6
body { background-color: #eeeecc;
font-family: Arial, Verdana; }
h1 { color: #000088; }
#alumno{ font-style:italic;
color: #888888; }
td{ border: solid 1px #000000; }
li{ list-style-type: square; }
Con esto modifi camos el fondo y la
fuente del elemento body.
Con esto, el color de las cabeceras h1.
Añadimos fuente cursiva y color a los
elementos con id alumno.
Añadimos un borde sólido, negro y de
1 píxel a las celdas de la tabla.
En los elementos de tipo lista,
utilizaremos cuadrados.
En el sitio de W3Schools dis-
pones de un completo tutorial
sobre CSS con gran cantidad de
ejemplos on-line. Puedes consul-
tarlo en: http://www.w3schools.
com/css/.
Además, en este sitio dispo-
nes de una completa referen-
cia a todos los atributos CSS
en: http://www.w3schools.com/
cssref/default.asp.Es muy recomendable que le
eches un vistazo si deseas pro-
fundizar en CSS.
Web
Aplicaciones web sociales1
32
3.4. Diseño web en la nube: Weebly
En la nube existe una gran variedad de herramientas web que permiten la creación de
sitios web de forma fácil y rápida. Weebly es una de estas herramientas que ofrece, de
forma gratuita y con pocos clics, la creación de sitios web y blogs con aspecto profesio-
nal. Algunas de las características de Weebly son:
• Interfaz WYSIWYG, mediante arrastrar y soltar componentes.
• Gran variedad de widgets: galerías de imágenes, vídeos, audio, mapas, documentos,
formularios, presentaciones, archivos, foros, juegos, canales RSS o código HTML.
• Uso de diferentes idiomas: inglés, francés, español, italiano y chino.
• Gran variedad de diseños profesionales, permitiendo la modificación del CSS y el
diseño HTML, para los usuarios más avanzados.
• No incluye publicidad.
• Permite el uso de dominios propios o bien alojamiento de dominio gratuito.
Creación de un sitio en weebly.com
Duración: 5 minutos Dificultad: baja
Objetivo: crear un sitio web en la nube con Weebly.
Solución:
En el siguiente Caso práctico vamos a crear un sitio web en el portal weebly.com. En él crearemos nuestra cuenta, con un
pequeño site que iremos ampliando en los siguientes casos prácticos.
1. Accedemos a www.weebly.com y
nos registramos, bien a través de
nuestra cuenta en Facebook, o bien
a través de nuestra cuenta de correo
(Fig. 1.20).
2. Una vez introducidos nuestros datos, y
superar un captcha (Fig. 1.21), se nos
pide que indiquemos el nombre de la
página, así como el tipo de sitio y la
categoría. En nuestro caso, vamos a
indicar que se trata de un sitio de edu-
cación, y que se trata de un proyecto
de clase (Fig. 1.22).
3. En la siguiente pantalla indicaremos
qué dominio vamos a utilizar. Pode-
mos registrar un dominio, utilizar un
dominio de nuestra propiedad o utili-
zar un dominio propio de Weebly. En
nuestro caso, utilizaremos esta última
opción (Fig. 1.23).
Escoge un nombre de dominio que esté
libre para tu página. Puede estar com-
puesto por tu nick, las iniciales de tu nom-
bre o cualquier nombre que te guste.
Hecho esto, ya nos encontramos en dispo-
sición de empezar a editar nuestro sitio.
Caso práctico 7
Existen otros portales de crea-
ción de webs muy parecidos
a Weebly: Jimdo, Yola, Webs
o Wix.
¿Sabías que…?
En el siguiente enlace, pue-
des encontrar un vídeo sobre
creación de sitios en Weebly:
ht tp://w w w.youtube.com/
watch?v=utDHQwtNk7k.
Web
Fig. 1.20. Acceso a weebly.com. Fig. 1.21. Captcha.
Fig. 1.22. Tipo de proyecto en Weebly.
Fig. 1.23. Elección del dominio.
33
1Aplicaciones web sociales
Primeros pasos con Weebly
El panel de control principal de Weebly nos ofrece la lista de nuestros sitios web, así
como la posibilidad de cambiar de idioma. Para cada uno de los sitios web, podemos
modificarlos, consultar las estadísticas o, a través de la pestaña Más, realizar copias de
seguridad o consultar los comentarios del blog o entradas a formularios.
A través del botón de Modificar, se accede al panel de edición del sitio en Weebly:
Para empezar a trabajar deberemos tener en cuenta, principalmente:
• Los elementos de página. Constituyen los bloques básicos de contenido, ya sea texto,
imágenes, vídeos, etc.
• Las páginas. Un sitio web, generalmente organiza su información en páginas y subpá-
ginas. Weebly ofrece la posibilidad de incluir en nuestro sitio tantas como deseemos.
• El diseño. Un importante aspecto en todo sitio web es cómo se presenten los con-
tenidos. El diseño desempeña cada día un papel más importante para crear sitios
atractivos a nuestros potenciales visitantes. Weebly ofrece gran cantidad de temas
para nuestros sitios, así como la posibilidad de modificarlos mediante HTML y CSS.
Fig. 1.24. Panel de control de Weebly.
Fig. 1.25. Panel de edición del sitio en Weebly.
Selección de idioma
Lista de sitios
Menú principal de edición Publicar, Ayuda, Cerrar Sesión
Contenido del sitio
Aplicaciones web sociales1
34
Creación de contenido en nuestra página
Duración: 15 minutos Dificultad: baja
Objetivo: añadir contenido a nuestro sitio web creado anteriormente.
En el Caso práctico anterior se creó un sitio vacío sobre la plataforma Weebly. Es el momento ahora de empezar a añadir
contenido a nuestra página. Para ello, en primer lugar cambiaremos el aspecto de nuestra página inicial y le añadiremos
un texto e imagen de bienvenida. Como vamos a ver, Weebly es muy intuitivo y fácil de utilizar, ya que nos muestra las
posibles acciones que se pueden realizar en función del contexto en que nos encontremos.
1. En primer lugar, vamos a modificar la imagen de bienvenida que aparece por defecto. Para ello, pasamos el ratón por
encima de la imagen y observamos que nos aparece un botón Edit Image. Haciendo clic en él, activaremos el plugin
imageperfect, para la edición de imágenes.
Observa cómo cuando hacemos clic fuera de la
imagen, el menú con las opciones de imagen des-
aparece, o se modifica si seleccionamos el fondo
sin la imagen. Prueba a modificar el tamaño de la
imagen, y las distintas opciones que aparecen en
el menú, para recortar (Crop), rotar (Rotate), añadir
transparencia (Opacity), difuminar (Fade), o añadir
diferentes efectos a la imagen (Effects), así como a
modificar el color de fondo de la cabecera.
Para utilizar una imagen personalizada, haremos clic en el botón Add Image y seleccionaremos una imagen de nuestro
disco (aunque Weebly también nos permite buscar imágenes en la Red, introducir la URL de una imagen o a partir de
una colección de favoritos). En nuestro caso, hemos subido la imagen cabecera.png. Si reducimos el tamaño de nuestra
imagen, veremos que aún está la primera imagen sobre el fondo de la cabecera. Podemos mantener las dos o, si desea-
mos eliminarla y utilizar la última imagen, deberemos hacer clic en el aspa que aparece en la parte superior derecha de
la imagen. Utilizaremos la imagen subida como cabecera completa, así que eliminamos la imagen anterior. A esta nueva
imagen, podemos añadirle también los efectos que deseemos. Podemos ampliarla tanto como queramos para que ocupe
toda el área de la imagen de cabecera.
Una vez hayamos terminado con los retoques, haremos clic en el botón Save ubicado en la parte superior derecha del
área de trabajo. Podremos guardar la cabecera que acabamos de crear, bien para todo el sitio, para la página actual o
para un conjunto de páginas concreto. La guardaremos para todo el sitio (Save > as Default Header).
2. En segundo lugar, vamos a modificar el título del sitio. Para ello, nada más fácil que situar el puntero del ratón sobre el
área del título, y observaremos que tenemos tres opciones: Off, para eliminar el título, Text, para dejar el texto, o Logo,
para utilizar una pequeña imagen en lugar del texto. En nuestro caso, utilizaremos el texto. Si hacemos clic sobre el
propio texto que nos aparece, podremos modificar su contenido.
Caso práctico 8
Fig. 1.28. Título del sitio.
(Continúa)
Fig. 1.26. Menú de imágenes.
Fig. 1.27. Menú de edición de imágenes.
35
1 Aplicaciones web sociales
3. El siguiente paso consistirá en añadir algo de contenido a
esta primera página. Para ello, en la pestaña Elementos,
del editor de Weebly, disponemos de varios elementos,
ordenados en diferentes categorías (Fig. 1.29).
4. Vamos a añadir un elemento de párrafo con título. Para
ello, dentro del menú del editor Elementos, seleccionamos
la categoría Básico, y buscamos el elemento Párrafo con
título. Para añadir el elemento, no tendremos más que
arrastrarlo hasta el área donde queramos ubicarlo, en
nuestro caso, inmediatamente detrás de la cabecera (Fig.
1.29). Una vez ubicado el elemento, podremos añadirle
como título «Bienvenidos», y una pequeña descripción del
sitio (Fig. 1.30).
5. Para añadir una imagen, seguiremos el mismo procedi-
miento, arrastrando y soltando el elementoImage desde el
menú Elementos > Básico hasta justo debajo del párrafo
anterior. Una vez añadida, deberemos hacer clic en la
imagen por defecto Click here to edit, y, a través del menú
que nos muestra, seleccionar la imagen bien desde nues-
tro ordenador, una URL, Favoritos o realizar una búsqueda
(Fig. 1.31). En nuestro caso, hemos seleccionado la ima-
gen desde el ordenador llamada logoSMR.png.
6. Para finalizar este Caso práctico, vamos a modificar la dis-
posición de elementos de nuestra página. Para ello, debe-
remos seleccionar en el menú Elementos > Básico > Múlti-
ple Columns, y arrastrarlo debajo de la imagen.
7. Una vez ubicado el elemento, no tendremos más que
arrastrar los elementos anteriores (párrafo e imagen) hacia
cualquiera de las dos columnas. En nuestro caso, arrastra-
mos el párrafo a la columna izquierda y la imagen, a la
derecha.
Caso práctico 8
(Continuación)
18. Como se ha visto en el Caso práctico anterior, es muy
fácil añadir y redistribuir elementos en una página
creada con Weebly. Explora los diferentes tipos de ele-
mentos en las categorías de Básico y Multimedia. Fíjate
en los tipos de párrafo que aparecen y qué otros ele-
mentos puedes añadir (vídeos, sonido...).
19. Explora también las diferentes posibilidades que ofrece
Weebly a la hora de trabajar con los diferentes elemen-
tos. Cambia su distribución, tamaño, etc.
Actividades
Fig. 1.29. Categorías y colocación de un párrafo.
Fig. 1.31. Selección de imágenes.
Fig. 1.33. Resultado fi nal.
Fig. 1.30. Párrafo.
Fig. 1.32. Reorganizando los elementos.
Aplicaciones web sociales1
36
Creación de páginas en nuestro sitio de Weebly
Duración: 5 minutos Dificultad: baja
Objetivo: añadir nuevas páginas a nuestro sitio en
Weebly.
Solución:
Ahora que ya sabemos crear una página sim-
ple con Weebly, veremos qué fácil resulta añadir
varias páginas a nuestro sitio.
• En primer lugar, deberemos acceder al ges-
tor de páginas a través de la pestaña Pági-
nas del menú principal. A través de este
menú podremos crear nuevas páginas o
modificar las existentes.
• Para crear una nueva página, deberemos
seleccionar la opción Add Page, situada a
la izquierda de la página. Como podremos
observar, aparece una nueva página lla-
mada New Page. Observaremos que, en la
parte derecha, aparecen las propiedades
de la página, como el nombre, la disposición de elementos, la visibilidad o la privacidad (solo en la versión profe-
sional). Vamos a cambiar el título de la página por el de Mi Centro, y dejaremos la página visible en el menú.
También puedes enlazar la página con un sitio externo o añadir propie-
dades avanzadas.
Las opciones avanzadas que podemos encontrar para la página hacen
referencia a información de utilidad para la cabecera del documento
HTML de la página. Esta información se traduce en etiquetas ubicadas
dentro de la etiqueta <head> del documento, y nos será útil para hacer
nuestras páginas más accesibles y fáciles de encontrar para los busca-
dores:
• Título de la página en la etiqueta del título de HTML (etiqueta
<title>).
• Descripción de la página (propiedad description de la etiqueta
<meta>).
• Palabras clave (propiedad “keywords” de la etiqueta <meta>).
Además podremos añadir código HTML tanto para el pie, como para la
cabecera de la página.
Caso práctico 9
Fig. 1.36. Opciones avanzadas.
Fig. 1.34. Creación de una página.
Fig. 1.35. Opciones de la página.
20. Añade contenido a la página web Mi Centro que aca-
bas de crear sobre tu centro.
21. Crea dos páginas más: Mi Clase y Sobre el Autor,
donde añadas información sobre tu curso, tus compa-
ñeros y tú mismo.
22. Añade un blog a tu página. Accede a los blogs de tus
compañeros, deja comentarios y observa lo que hacen
en tu blog.
23. Añade un formulario de contacto a tu sitio en Weebly,
accede a los formularios de tus compañeros, y observa
cómo te llegan los resultados a tu formulario.
24. Investiga sobre las páginas ocultas. Cómo se crean,
cómo accedemos a ellas, y qué utilidades pueden
tener.
Actividades
37
1 Aplicaciones web sociales
Diseño web con Weebly
Weebly dispone de un gran número de diseños predefinidos para aplicar a nuestro sitio.
Estos diseños son altamente personalizables, mediante la edición del código HTML y
CSS del sitio. En los siguientes Casos prácticos vamos a ver cómo cambiar el diseño del
sitio, editarlo y crear nuestro propio estilo desde cero.
Fig. 1.38. Temas.
Fig. 1.37. Pestaña diseño.
25. Siguiendo los pasos indicados en el Caso práctico para
el título, modifica también los estilos de párrafos y títu-
los de párrafos.
26. Cambia los colores por defecto con los que se muestran
los enlaces.
Actividades
Modificando el diseño
Duración: 5 minutos Dificultad: baja
Objetivo: cambiar el diseño de un sitio en Weebly por uno predefinido.
Solución:
Cambiar el diseño del sitio web es una tarea muy sencilla en Weebly. Tan fácil
como:
• Hacer clic en la pestaña Desing, para acceder a la ventana de diseño
(Fig. 1.38).
• Hacer clic en el diseño que más nos guste.
Si lo deseamos, podemos ver los diferentes diseños detallados organizados por
clases desplegando la pestaña All themes (Fig. 1.38). En este caso, cuando haga-
mos clic en un tema, pasaremos a una nueva vista con una descripción del tema,
detalles y temas relacionados. Podremos también hacer una previsualización y
aplicarla a nuestro tema, o añadirlo a nuestros Favoritos.
Una vez escogido un tema, podemos personalizar los tipos de letra que contiene.
Para ello, debajo de Favoritos en el editor Weebly, disponemos de la opción Op-
ciones de diseño. En esta opción podremos:
• Mostrar u ocultar iconos para referenciar el sitio en redes sociales, así como
mostrar un número de teléfono.
• Cambiar la fuente, tamaño y color del título del sitio, de los párrafos y de los
títulos de los párrafos y el color con que aparecen los enlaces.
• Vamos a cambiar el tipo de letra del título. Para ello, en la pestaña Diseño >
Opciones de Diseño, seleccionamos la opción Set Title. A su izquierda, nos
aparecerá el formulario para indicar el tipo y las propiedades del texto. En
nuestro caso, elegimos la fuente Lilly, color azul y tamaño 40 (Fig. 1.39).
Del mismo modo, podemos cambiar el tipo de letra y las propiedades del resto de
elementos de tipo texto.
Caso práctico 10
Fig. 1.39. Confi guración del texto.
Puedes vincular cuentas de
varias redes sociales a tu sitio
web. Para ello, debes tener acti-
vada la opción correspondiente
en Design Elements y configurar
las cuentas, ubicando el puntero
del ratón sobre los iconos corres-
pondientes al lado del título del
sitio.
¿Sabías que…?
Fig. 1.40. Redes sociales.
Aplicaciones web sociales1
38
Weebly, además de poder aplicar diseños predefinidos a nuestros sitios, permite su
modificación mediante HTML y CSS para darle un aspecto más personalizado. Para
ello, en el modo de diseño (pestaña Design), disponemos de la opción Editar HTML/CSS
(Fig. 1.41). Cuando hacemos clic en ella, accedemos a un editor on-line avanzado de
temas, desde el que podremos modificar los ficheros del sitio:
En la barra de la izquierda, encontramos el nombre del tema actual (MyTheme), e in-
mediatamente debajo, nos encontramos los archivos CSS, los diseños de páginas (Page
Layouts) y los archivos que utiliza el tema. Como podemos observar, existen diferentes
diseños de página (layouts) en el tema que estamos utilizando, para según qué tipo de
visualización queramos crear.
Cuando utilizamos diseños de página en Weebly con HTML, existen una serie de tags
o etiquetas, utilizadas por el motor de temas para insertar contenido. Estos tags pueden
dividirse en:
• Tags obligatorios. Etiquetas predefinidas que sirven para ubicar elementos como el
título, el menú, el contenido y el pie de página. Para referirnos a ellas utilizaremos la
etiqueta entre llaves: {etiquetas}.
• Tags personalizados. Se utilizan para añadir áreas personalizadas orientadas a la
inserciónde texto, elementos de contenido o imágenes, como puedan ser logos,
subtítulos, barras laterales, cabeceras o pies de página. Para definir una etiqueta per-
sonalizada, lo hacemos entre llaves, y separando el nombre y el tipo de datos entre
dos puntos: {etiqueta:tipo}.
Por defecto, estos tags personalizados muestran el mismo contenido en todas las pági-
nas. Si deseamos que el contenido sea variable en cada página, utilizaremos el atributo
global=”false” del siguiente modo:
{area _ personalizada:content global=”false”}.
Además del HTML, disponemos en la sección de CSS donde se ubica el código CSS
para definir el estilo y aspecto que tendrá nuestro sitio. Vamos a verlo todo junto con el
siguiente Caso práctico.
Fig. 1.41. Pestaña HTML/CSS.
Puedes modificar el nombre del
tema haciendo clic en el icono
del lápiz al lado del nombre.
Claves y consejos
Con tal de mantener la consis-
tencia entre temas o tipos de
página, Weebly recomienda el
uso de ciertos nombres de eti-
quetas para contenido común,
tal y como se muestra en la
siguiente tabla:
{logo:
image} Logo del sitio.
{subtitle:
text} Subtítulo del sitio.
{sidebar:
content} Barra leteral.
{phone:
text}
Número
de teléfono.
{address:
text} Dirección.
Tabla 1.19. Nombres de
etiquetas recomendados.
Claves y consejos
{title} Título del sitio
{menu} Menú del sitio
{content} Contenido del sitio
{footer} Pie del sitio
Tabla 1.17. Tags obligatorios.
{area-name:
text}
Defi ne un área que
contiene texto.
{area-name:
content}
Defi ne un área para
ubicar elementos
(p. ej., la barra de
menú).
{area-name:
image}
Defi ne un área para
ubicar una imagen.
Tabla 1.18. Tipos de tags
personalizados.
Fig. 1.42. Editor HTML/CSS.
39
1 Aplicaciones web sociales
Diseño completo de una plantilla en Weebly
Duración: 45 minutos Dificultad: media
Objetivo: diseñar una plantilla básica por
completo.
Solución:
Vamos a crear un nuevo tema para nuestro
sitio web partiendo de cero. Diseñaremos
el esquema de páginas y lo dotaremos de
aspecto con CSS. Los ficheros necesarios se
encuentran en el archivo APW_U1_CP11.zip.
1. En primer lugar, debemos crear el
nuevo tema y el esqueleto de este. Para ello, iremos a Diseño > Todos los temas >
Temas personalizados, y haremos clic en el botón New Theme.
En el editor de temas, veremos que tenemos un esquema para fichero CSS y un diseño
de página genérico index.html. Observa que ambos ya tienen contenido, y cómo se
tratan en el fichero index.html las etiquetas obligatorias de contenido que indicábamos
arriba. Como puedes observar, en la ventana de debajo del código se muestra la pre-
visualización del tema, sin ningún formato.
En el fichero index.html, podemos apreciar los diferentes bloques div en los que se
divide la página, y que se esquematizan en la Figura 1.44. En los siguientes pasos,
vamos a ir dando formato a estos bloques.
2. Nos situamos en la sección CSS, y editaremos el fichero main-style.css. Dejamos el
primer bloque (*|*) como está, para eliminar márgenes y rellenos por defecto de
todos los tipos.
Añadiendo una imagen de fondo
3. Vamos a añadir una imagen de fondo al cuerpo de la página. Para ello, debere-
mos hacer dos cosas: modificar el estilo del elemento body, y subir la imagen que
utilizaremos. Para subir la imagen, basta con hacer clic en Add New File(s) de la
sección Archivos, y escoger el archivo de fondo fondo.png. El elemento body, del
fichero de estilos quedará del siguiente modo:
body {
font-family: Tahoma, Geneva, sans-serif; /*Seleccionamos el tipo de fuente*/
font-size: 14px; /*Tamaño de la fuente*/
color: #333333; /*Color de la fuente*/
margin: 0; /*Eliminamos los márgenes*/
padding: 0; /*Eliminamos el relleno*/
background-image: url(‘fondo.png’); /*Añadimos la imagen de fondo*/
background-repeat: repeat; /*Repetimos la imagen vertical y horizontalmente*/
}
4. Ahora daremos formato al contenedor del contenido (elemento wrapper), con el siguiente formato:
#wrapper {
background: #fff; /* Dejamos el fondo en blanco */
max-width: 1024px; /* Tamaño máximo 1024 píxeles */
margin-left: 100px; /* Dejamos 100 píxeles de margen a izquierda y derecha*/
margin-right: 100px;
}
Modificando la cabecera
5. Pasamos ahora a dar formato a la cabecera. En primer lugar, estableceremos su altura total en 430 píxeles, a través
del elemento #header.
#header {
height: 430px;
}
Caso práctico 11
Fig. 1.44. Bloques div por defecto.
Fig. 1.45. Elegir la imagen de fondo.
Fig. 1.43. Nuevo tema.
2 3
41
(Continúa)
body
wrapper
navigation {menu}
content-wrapper {content}
header
sitename {title}
footer
footer-content {footer}
Aplicaciones web sociales1
40
(Continúa)
6. Para añadir la imagen a la cabecera, en primer lugar, deberemos subirla mediante el enlace Add New File. Subiremos
el fichero default_header.jpg, y vamos a definir el estilo .wsite-header del siguiente modo:
.wsite-header {
background: transparent url(%%HEADERIMG%%) no-repeat center top;
}
De este modo, hemos definido el estilo llamado wsite-header, con una imagen de fondo. Esta imagen se referencia
mediante la variable %%HEADERIMG%%. Cuando utilizamos esta variable, Weebly buscará la imagen default_header.
jpg, que es la imagen por defecto del tema, y es la que acabamos de subir. Si deseásemos cambiar la imagen de la
cabecera por una diferente a la del tema, podemos modificarlo tal y como vimos en el Website Editor.
7. Ahora solo nos queda por añadir al fichero index.html un elemento <div>, de la clase que acabamos de crear, con la
imagen de fondo, dentro del div de cabecera. Este div (header), quedaría pues del siguiente modo:
<div id=”header”>
<div id=”sitename”>{title}</div>
<div id=”header” class=”wsite-header”> </div>
</div>
Modificando el menú de navegación
8. Para modificar el estilo de los menús, deberemos centrarnos en los elementos de tipo navigation, así como en los
de tipo enlaces. Para el menú de navegación vamos a utilizar la imagen back_menu.png, así que, antes de nada,
deberemos subirla.
Y complementamos las definiciones de los estilos de navegación del código siguiente:
#navigation {
background-image: url(‘back _ menu.png’); /*Imagen de fondo que acabamos de subir*/
background-repeat: repeat-x; /*repetimos la imagen horizontalmente*/
height: 30px; /*Establecemos 30 píxeles de altura*/
width: 100%; /*El menú ocupará todo el ancho*/
color: #ffffff; /*El texto será blanco*/
font-size: 16px; /*Y con 16 píxeles de tamaño*/
}
#navigation ul li{ /*Elementos de tipo lista */
list-style: none; /*Borramos el estilo de lista*/
float: left; /*Alineación de elementos a la izquierda*/
padding: 0 2px 0 0; /* Establecemos 2 píxeles de relleno a la derecha */
}
#navigation a:link, a:visited { /*Elementos de tipo enlace*/
float: left; /*Alineamos los elementos a la izquierda*/
display: block; /*Se muestran como elementos de bloque */
color: #eeeeee; /*Establecemos un color gris claro*/
text-decoration: none; /*Eliminamos el formato de enlace*/
font-family: “Actor”, “Myriad Pro”, Arial, Helvetica, sans-serif; /*Tipos de fuente*/
padding: 10px 15px 7px; /*Relleno: 10px por arriba, 15 a la derecha y 7 abajo.*/
font-size: 13px; /*Tamaño de la fuente a 13 píxeles*/
text-transform: uppercase; /*Texto en mayúsculas*/
}
#navigation a:hover { /*Formato de los enlaces cuando se pasa el ratón por encima*/
color: #545454; /*Color del texto*/
background: #e3f3ff; /*Color de fondo*/
border: 0; /*Eliminamos el borde*/
}
a:link a:hover, a:visited { /*Formato en general de los enlaces*/
text-decoration: none; /*Eliminamos subrayado y colores de los enlaces*/
}
Caso práctico 11
(Continuación)
41
1 Aplicaciones web sociales
Modificando el estilo del contenido
9. El contenido se encuentra dentro de los divs de tipo content-wrapper. Dentro de él, se ubican los elementos de tipo
content que son los que vamos a modificar. Dejamos el content-wrapper y el content como sigue:
#content-wrapper {
}
#content{
margin: 20px; /* Añadimos un margen de 20 píxeles */
border-top-left-radius: 10px; /* hacemos redondo el borde superior derecho */
border-bottom-right-radius: 10px; /* y el inferior izquierdo */
border-style: solid; /* Utilizaremos un borde con línea continua*/
border-color: #000000; /* El borde será negro */
border-width: thin; /* y con una línea fina */
padding: 10px; /* El espacio de relleno será de 10 píxeles*/
}
Modificando el pie de página
10. Ya para terminar, vamos a dotar de formato a los elementos del pie de la página (footer y footer-content):
#footer {
background: #000000; /* El pie de página será de color negro */
}
#footer-content {
color: #ffffff; /* Y para el contenido utilizaremos texto blanco*/
}
Caso práctico 11
(Continuación)
27. Con lo que has aprendido sobre Weebly, HTML y CSS, y basándote en la guía
del sitio W3Schools, crea un nuevo estilo personalizado para tu sitio. Prueba a
añadir también diferentes disposiciones (layouts) de página.
Actividades
3.5. Wikis
El sistema wiki es una evolución de la Word Wide Web, concebido para facilitar su uso
(wikiwiki significa rápido en hawaiano). Según War Cunningham, su creador, consiste
en una aplicación web que permite visualizar en línea un conjunto de páginas cuyo
contenido puede ser editado por los usuarios, quienes además pueden generar nuevas
páginas.
Las wikis se han convertido en una de las herramientas fundamentales de la web 2.0
actual, dada la facilidad con la que se pueden generar y publicar contenidos solo con
conocer los metalenguajes que la forman (HTML, CSS, JavaScript...). Cualquiera puede
actualizarlas en línea, ya lo haga a título personal o como miembro de un equipo de
trabajo o una comunidad de aprendizaje, siempre y cuando disponga de los permisos
adecuados.
Dispones de los siguientes docu-
mentos:
• APW_U1_Wikis.pdf, donde se
explican ampliamente las wikis.
• APW_U1_CP_Wiki1.pdf, con un
Caso práctico para la instala-
ción de MediaWiki sobre el
stack Lamp de Bitnami.
• APW_U1_CP_Wiki2.pdf, con un
Caso práctico sobre creación de
cuentas en Media-Wiki.
• APW_U1_CP_Wiki3.pdf, con un
Caso práctico para añadir
contenido a MediaWiki.
CEO
Aplicaciones web sociales1
42
Puedes consultar un interesante
vídeo sobre la historia de la
compañía Google desde su ini-
cio en 1995 hasta 2009, viendo
los principales proyectos lanza-
dos o adquiridos durante estos
años en:
The Google Story
http://youtu.be/EjN5avRvApk
Si quieres saber más sobre su
trabajo colaborativo, también
puedes ver una charla de un
español que trabaja en Google
Londres:
Working at Google
http://youtu.be/FADCYiOYu6M
También conviene destacar los
seminarios web on-demand:
Configuración de Google Apps
para la PYME – Español
http://youtu.be/dnb4BmnwZOU
Web
4. Google Apps para trabajo colaborativo
En la sociedad del conocimiento en la que nos encontramos actualmente, es fundamen-
tal capacitarte para saber trabajar en equipo o de manera colaborativa, pero esto no
quiere decir partir el trabajo en partes más o menos equitativas y olvidarse del resto,
sino participar el máximo posible en el avance o desarrollo de proyectos a los que os
tengáis que enfrentar.
Las herramientas de trabajo en grupo o groupware permiten desarrollar proyectos a
distancia y de manera conjunta. A grandes rasgos, puede distinguirse entre herramien-
tas de comunicación y de colaboración o publicación. Las primeras nos sirven para la
comunicación entre el grupo (servicios de correo electrónico, mantenimiento de calen-
darios, agendas, etc.), mientras que las segundas nos ofrecen la posibilidad de editar
y compartir documentos, además de llevar un registro de las versiones previas y los
cambios realizados.
El trabajo en grupo o colaborativo es cada vez más importante para el funcionamiento
de empresas y organizaciones, ya que permite la movilidad de los trabajadores. Y una
de las compañías que mejor ha desarrollado esta filosofía de trabajo colaborativo es
Google y sus Apps, que aprenderás en este epígrafe. En concreto, si disponemos de un
dominio propio, podemos optar por varias opciones (Fig. 1.47) o si no disponemos aún
de ese dominio propio, pues activando cada servicio con la cuenta de Google que ya
tenemos creada.
La instalación de aplicaciones
web no es siempre sencilla, y
pueden surgir imprevistos duran-
te el proceso. Para facilitar esta
tarea, el proyecto de software
libre Bitnami ofrece un conjunto
de paquetes preinstalados, lla-
mados stacks, preparados para
instalar un gran número de apli-
caciones web sobre ellos.
Dispones del documento APW_
U1_StackBitnami.pdf, con una
explicación más extensa y con
la instalación del stack de base
para Bitnami.
CEO
Fig. 1.46. Diferentes opciones de Google Apps.
Fig. 1.47. Servicios que entran en cada opción de Google Apps (* 7.731.859 GB de
almacenamiento de correo electrónico por cuenta).
43
1 Aplicaciones web sociales
4.1. Correo web: Gmail
Es uno de los servicios estrella de Google que ofrece gratuitamente de momento, en
concreto es el que gestionará nuestro correo electrónico, ya que es un cliente web muy
innovador que utiliza el concepto de etiquetas para poder organizar y filtrar la corres-
pondencia, pudiendo utilizar su motor de búsquedas Google Search para localizar
cualquier cosa dentro del mismo. Además, integra de serie otros servicios como un
gestor de contactos muy potente que luego podrás utilizar en tus dispositivos móviles,
sobre todo para Android. Otro servicio integrado es Google Talk para realizar chats
escritos o incluso con audio y vídeo. También incorpora Google Task que permite crear
listas de tareas a realizar, sin olvidar Google Adwords que nos va mostrando publicidad
relacionada con el contenido del correo que estemos leyendo. Es tan modular que po-
demos ampliarlo con más servicios con la opción de Labs que nos permite probar todas
las novedades que se les van ocurriendo, que no son pocas, como por ejemplo tener un
gadget que enlace con otros servicios como Google Calendar o Google Docs, que ha
pasado a denominarse Google Drive.
Activar la opción de Calendar de Labs para enlazarlo con Gmail
Duración: 5 minutos Dificultad: fácil
Objetivo: añadir funcionalidades a Gmail activando la agenda.
Material y herramientas: una cuenta de Google asociada a la cuenta de Gmail.
Utilidades: Google Calendar Gadget para Gmail.
Solución:
• Cuando entramos por primera vez en Gmail, el sistema nos dará la bienve-
nida. Puede que te pida más datos sobre tu cuenta como tu número de móvil
y otra cuenta de correo que sirva de recuperación en caso de perder la clave
de esta (ten en cuenta que estos datos son opcionales, de momento no hace
falta que los pongas si no quieres) y una vez dentro encontraremos los prime-
ros mensajes en la bandeja de entrada.
• Para entrar en la configuración, deberás hacer clic sobre el botón que tiene
un dibujo de un engranaje, desplegar la lista y elegirla.
• Una vez dentro de la configuración, haz clic en el enlace Labs y busca por
Calendar.
Caso práctico 12
(Continúa)
Fig. 1.48. Información opcional de la
cuenta de Google.
Fig. 1.49. Puedes elegir un tema para
personalizarte el entorno.
Fig. 1.50. Puedes importar contactos
que tengas de anteriores correos
electrónicos.
Fig. 1.51. Gmail también va contigo
con tu móvil o tablet.
Fig. 1.52. Aspecto de Gmail la primera vez que entras en él.
Aplicaciones web sociales1
44
4.2. Calendario web: Google Calendar
Se trata del servicio de agenda y calendario que nos ofrece Google. Permite compartir
y sincronizar eventos con nuestros contactos de Gmail. Al tratarse de una agenda on-
line, podemos acceder desde cualquier sitio y, además, mantener los datos a salvo de
posibles averías de nuestro ordenador.
Entre sus características principales, merecen destacarse:
• Permite importar archivos de Outlook, Yahoo! Calendar, e iCalendar.
• Permite usar múltiples calendarios.
• Podemos compartir calendarioscon diferentes contactos y niveles de permisos, inclui-
dos nuestros grupos.
• Permite importar calendarios públicos, de interés general.
Al calendario se accede a través de la URL http://calendar.google.com o bien seleccio-
nando Calendar en la parte superior de Gmail. Recuerda que para usar el calendario
debes disponer de una cuenta Google.
• Marca la opción de Habilitar y Guardar cambios.
• A partir de este momento podremos ver la agenda desde Gmail.
Te propongo que repitas este Caso práctico para activar también Google Docs.
Caso práctico 12
(Continuación)
Fig. 1.53. Activar el servicio Google Calendar dentro de Gmail.
En esta web: http://capuen.
100webspace.net/uoc/google
_calendar/google_calendar.html
dispones de un fantástico video-
tutorial sobre Google Calendar
del profesor Pablo C. Muñoz,
que lo ha licenciado bajo licen-
cia Creative Commons 3.0
España. Esperamos que apren-
das mucho con él.
Web
Puedes encontrar más informa-
ción sobre las partes de Gmail
en el documento SMR_AW_
GMAIL.pdf.
CEO
Opciones de visualización. Permiten mostrar
nuestra agenda o nuestras anotaciones por día,
semana o mes, o incluso a cuatro días por vista.
Fig. 1.54. Ventana principal de Google Calendar. El calendario principal permite seleccionar un día concreto. Mis calendarios permite crearlos,
gestionarlos y buscar nuevos. En Confi guración puedes modifi car el idioma o la ubicación.
45
1 Aplicaciones web sociales
Creación y gestión de eventos
Duración: 10 minutos Dificultad: fácil
Objetivos: crear y eliminar even-
tos en el calendario, así como
modificar sus propiedades.
Solución:
1. Creación de un evento
La manera más sencilla consiste
en hacer clic sobre el día o la
hora donde desees agregarlo.
En este caso, aparecerá una
pequeña ventana de diálogo
donde deberás introducir el nom-
bre del evento. A continuación,
haz clic en Crear evento. Si
deseas añadir algunos detalles,
dispones de la opción Editar detalles del evento. Una vez creado el evento, puedes supri-
mirlo pinchando en él y seleccionando la opción Suprimir o bien editar los detalles.
2. Detalles del evento
Cuando editas los detalles del evento,
verás una ventana similar a la de la
Figura 1.57. En dicha ventana, se distin-
guen tres áreas:
Propiedades. Desde aquí podrás modifi-
car el nombre del evento, las fechas entre
las que se comprende, la frecuencia con
que se repite (cada día, semana, mes,
etc.), el calendario al que pertenece o la
descripción. En el ejemplo, se ha modifi-
cado la periodicidad para que recuerde
el evento cada año.
Invitados. Permite compartir este evento con tus contactos o grupos e indicar los permi-
sos que tendrán sobre tus eventos: solo leerlos, editarlos, in vitar a otros al evento o ver
la lista de invitados. En este caso, invita a Alumno2SMR@gmail.com.
Opciones. Puedes configurar recordatorios para el evento mediante correos electró-
nicos o ventanas emergentes, así como mostrar tu disponibilidad y el nivel de privaci-
dad deseado. En el ejemplo, te avisará dos días antes con un men saje de correo y el
mismo día mediante una ventana emergente.
Caso práctico 13
Fig. 1.55. Creación de un evento.
Fig. 1.57. Detalles de un
evento.
Fig. 1.58. Propiedades del evento. Fig. 1.59. Invitados al evento. Fig. 1.60. Opciones del evento.
(Continúa)
Fig. 1.56. Supresión de un evento.
Aplicaciones web sociales1
46
Cuando pinches en Guardar, pregunta si deseas enviar invitaciones a tus invitados. Selecciona Enviar.
De este modo, todos los invitados del grupo recibirán un mensaje de correo en el que se les informará del evento y se les
preguntará por su asistencia. En la ventana de Propiedades, podrás ver quién la ha confirmado.
Caso práctico 13
(Continuación)
28. Crea tu calendario personal en Google Calendar, y
añade:
• La fecha de tu cumpleaños (que se repetirá todos los
años).
• La fecha de la fiesta de tu cumpleaños (que será úni-
camente para este año).
A continuación:
• Prepara una invitación a la fiesta de tu cumple años y
envíala a va rios de tus compañeros.
• Marca en tu calendario las fechas de vacaciones.
• Crea un par de eventos más con algunas fe chas que
desees recordar.
Actividades
Cómo crear y compartir nuevos calendarios
Duración: 10 minutos Dificultad: fácil
Objetivo: crear varios calendarios en función
del uso que se les dará o del ámbito que se
les atribuirá.
Solución:
En este Caso práctico, crearemos un nuevo
calendario para los eventos de clase y lo com-
partiremos con el grupo.
1. Para crear un nuevo calendario, selec-
ciona Crear en el menú. Te mostrará una
ventana de configuración en la que debes
indicar los datos del calendario y las per-
sonas con quienes quieres compartirlo.
2. A continuación, especifi ca los datos gene-
rales. En la parte superior de la ventana,
indica el nombre del calendario, la des-
cripción, la ubicación y su zona horaria
(Fig. 1.63).
3. En la parte inferior de la ventana se muestran las opciones de privacidad, así como las que permiten compartir el calen-
dario o no. En primer lugar, indica si deseas hacer público el calendario, de modo que cualquier usuario de Google
Calendar pueda acceder a él. No selecciones esta opción, ya que el calendario será de acceso restringido a la clase.
No obstante, puedes compartirlo con ciertas personas, en especial con tus compañeros de clase Alumno2SMR y
Alumno3SMR. Para ello, introduce sus direcciones en la lista de personas con quienes compartes el ca lendario.
Caso práctico 14
Fig. 1.61. Enviar actualizaciones. Fig. 1.62. Confi rmación de asistencia.
Fig. 1.63. Creación de un nuevo calendario.
(Continúa)
47
1 Aplicaciones web sociales
Si deseas vetar a alguna persona, no tienes más que seleccionar el cubo de basura situado a la derecha de su nombre
de usuario.
4. Finalmente, selecciona Crear Calendario. Como puedes observar, cada nuevo calendario se muestra con un color
distinto. Para añadir más entradas, basta con seleccionarlo en la ventana de creación del evento.
5. Habrás observado que el calendario, aun siendo una aplicación web, ofrece una interacción completa con sus ele-
mentos, sin que debas recargar continuamente la página para ver el contenido de forma dinámica. Esto se consigue
gracias a la combinación de ciertas aplicaciones web y otras tradicionales en lo que se conoce como RIA (Rich Inter-
net Applications o Aplicaciones de Internet Enriquecidas).
6. Cuando accedes a una aplicación RIA, cargas toda la aplicación completa y reduces el intercambio de tráfico con el
servidor, ya que la comunicación con este solo se producirá cuando se necesiten datos, como por ejemplo los ubica-
dos en una base de datos o ficheros externos.
Caso práctico 14
(Continuación)
29. Crea un nuevo calendario para eventos de clase y añade las fechas de inicio y
fin de curso, así como los días de fiesta y los periodos de exámenes.
30. Comparte el calendario con tus compañeros de clase.
Actividades
Fig. 1.64. Cómo compartir el calendario.
Fig. 1.65. Varios calendarios.
Fig. 1.66. Nuevo evento. Fig. 1.67. Añadiendo eventos al nuevo
calendario.
Aplicaciones web sociales1
48
Crea tu propio blog
Duración: 10 minutos Dificultad: fácil
Objetivo: crear un blog con la herramienta Blogger de Google.
Solución:
Para utilizar el servicio, deberás abrir una cuenta. Sin embargo, como ya la tienes, puedes pasar directamente a la crea-
ción del blog.
Los pasos son los siguientes:
1. Accede a la dirección www.blogger.com y busca la opción que te permite acceder a través de tu cuenta de Google.
Introduce tu nombre de usuario y haz clic en Acceder (Fig. 1.68).
2. Una vez dentro de Blogger, procede al registro, indi-
cando el nombre que usarás para publicar los blogs
(Fig. 1.69).
Caso práctico 15
4.3. Blogs
La Web se ha convertido en el medio de expresión más democrático del que dispone-
mos hoy en día. Los blogs o weblogs son uno de los soportes más difundidos. Desde un
punto de vista técnico, podría decirseque un blog es una versión simplificada o especia-
lizada de un sistema de gestión de contenidos (CMS).
A grandes rasgos, un blog es un cuaderno de notas en formato web, en el que se mues-
tran en pantalla las entradas más recientes.
Antes de finalizar esta unidad, y para introducirnos en el uso y administración de siste-
mas gestores de contenidos, veremos cómo funcionan dos de los sistemas de blogs más
usados hoy en día: Blogger y WordPress.
Blogger
Fue una de las primeras herramientas para la publicación de blogs. Creado por Pyra
Labs en 1999 y adquirido por Google en 2003, dispone de su propio servidor para el
alojamiento o hosting de blogs: Blogspot.
Se trata de una herramienta muy versátil que nos permite:
• Incluir fotografías gracias a Hello.
• Ordenar las entradas por categorías, llamadas etiquetas.
• Establecer cierto grado de restricción o privacidad en nuestros blogs.
• Realizar cambios en las plantillas modificando el código HTML.
(Continúa)
El microblogging o nanoblog-
ging es un servicio de publica-
ción de mensajes breves, gene-
ralmente en texto.
Algunos servicios de microblog-
ging los encontramos en:
Twitter: http://twitter.com/
Jaiku: http://www.jaiku.com/
Menéame: http://meneame.net/
Web
Fig. 1.68. Acceso a Blogger. Fig. 1.69. Registro en Blogger.
49
1 Aplicaciones web sociales
3. En la siguiente pantalla, te pedirá que introduzcas un
título para tu blog, así como la dirección desde la que
quieras que se acceda.
4. A continuación, seleccionarás una plantilla.
Caso práctico 15
(Continuación)
Fig. 1.70. Asignación de un nombre para nuestro blog. Fig. 1.71. Selección de la plantilla.
Fig. 1.72. Fin del proceso.
5. Aparecerá una pantalla que te informa de la finalización del proceso. Ya puedes publicar entradas.
Fig. 1.73. Creación de una entrada. Fig. 1.74. Tu blog.
Aplicaciones web sociales1
50
4.4. Google Groups
En febrero de 2001, Google compró la empresa Deja News (www.dejanews.com), pro-
pietaria del software del motor de búsqueda con acceso a los archivos de grupos de
Usenet. Poco después, nació Google Groups, un servicio gratuito para gente con intere-
ses comunes (una clase, un grupo de trabajo, de amigos, etc.) que ofrece un espacio en
la Web donde realizar debates, compartir documentación, archivos o información de
los miembros, tanto en público como en privado.
Puedes encontrar más informa-
ción sobre la parte de Grupos
de noticias en el documento
SMR_AW_USENET.pdf.
CEO
Creación de un grupo nuevo en Google Groups
Duración: 15 minutos Dificultad: fácil
Objetivos: crear y utilizar un grupo de Google Groups.
Material y herramientas: el ordenador de cada miembro del grupo con conexión a Internet.
Utilidades: es suficiente con un navegador web.
Solución:
Un miembro del grupo de trabajo de clase que haga la función de coordinador debe crear un grupo nuevo para invitar
al resto de componentes de la fila de trabajo.
Caso práctico 16
(Continúa)Fig. 1.75. Pasos para crear un nuevo Google Groups.
Página de configuración
de un nuevo grupo
Página de finalización
del proceso
Página de entrada
Página de invitación de
nuevos miembros al grupo
Página de comprobación de que
se trata de un usuario humano
51
1 Aplicaciones web sociales
1. Para crear el grupo, con la
cuenta de Google creada en
la primera unidad, se podrá
activar este servicio desde la
página http://groups.google.
es/, seleccio nando la opción de
Crear un nuevo grupo.
2. En la siguiente página, se pide
una breve configuración del
grupo (Fig. 1.75): el nombre, la
dirección de correo, la descrip-
ción y el nivel de acceso (público
o restringido).
3. Una vez configurado, mues tra
un captcha de verificación que
deberás rellenar. Tras hacerlo,
pulsa el botón Crear mi grupo.
4. La siguiente página te per mite
invitar a nuevos miem bros. Indica
las direcciones de correo elec-
trónico de los futuros miembros
y redacta un breve mensaje de
invitación. No te olvides, lógi-
camente, de incluir también el
correo electrónico del profesor.
5. Finalmente, aparecerá un mensaje que informa de la creación del grupo, así como de la dirección de la página prin-
cipal y del correo electrónico.
6. Una vez creado el grupo, bastará con teclear la dirección proporcionada o, si se tiene la cuenta de Google abierta en
el sistema, acceder a Mis Grupos desde groups.google.com. La ventana del administrador dispone de todas las opcio-
nes posibles, a diferencia del resto de miembros, para los que tan solo se habrán habilitado unas cuantas (Fig. 1.76).
7. En el margen derecho de la ventana se encuentra el menú principal y, en el resto, la página que se está visitando. Las
opciones principales son:
• Página principal. Muestra la lista de miembros, así como un listado con todas las operaciones que pueden reali-
zarse, tales como empezar un tema (debate) nuevo, invitar o añadir miembros, crear páginas, subir archivos o per-
sonalizar la configuración del grupo.
• Debates. Permite acceder a las conversaciones iniciadas por los miembros, ya sea haciendo clic en esta opción o
enviando un mensaje de correo electrónico al grupo.
• Miembros. Muestra los miembros que componen el grupo.
• Páginas. Alberga las páginas web del grupo y permite modificarlas mediante un sencillo editor.
• Archivos. Aloja los documentos enviados por los usuarios al grupo.
Caso práctico 16
(Continuación)
Grupos de Google par tes 1 y 2:
ht tp://w w w.youtube.com/
watch? v=84mXLuVEuCo.
h t tp://w w w.youtube.com/
watch? v=LE2P0pdI7c0.
Web
31. Investiga las opciones secundarias y de administración.
Analiza y configura el grupo recién creado, según las necesidades de los miem-
bros o las indicaciones del profesor. Deberás utilizar las opciones secundarias
Acerca de este grupo, Editar mi suscripción, Configuración del grupo, Tareas de
administración e Invitar a miembros.
Actividades
Fig. 1.76. Aspecto de la página principal del nuevo grupo creado en Google Groups.
Aplicaciones web sociales1
52
Crear documentos y compartirlos en Google Drive
Duración: 10 minutos Dificultad: fácil
Objetivos: crear documentos y compartirlos en Google Drive.
Solución:
1. En primer lugar, accederemos a nuestro Google Drive mediante la URL https://drive.google.com e iniciamos sesión. Se
nos mostrará la ventana de bienvenida a la aplicación (Fig. 1.77).
4.5. Ofimática web: Google Docs o Drive
Google, sin duda la compañía más innovadora en Internet, siempre se ha volcado en el
desarrollo de nuevos servicios aplicando tecnologías estándar, como AJAX, o adquirien-
do un número considerable de pequeñas empresas de éxito, como Writely, gracias a los
beneficios que le reporta la publicidad a través de AdSense y AdWord.
Con este servicio, primero denominado Google Docs, empezó a competir en el merca-
do de los paquetes ofimáticos, donde ya dominaba el mercado de las aplicaciones de
escritorio Microsoft Office y bajo licencia de software abierto OpenOffice/LibreOffice.
Google dio una nueva visión a estas aplicaciones, llevando dicho servicio a la Web,
donde aún no había serios competidores.
Google Docs/Drive introduce novedades entre las que destacan:
• Permite editar documentos de manera colaborativa en tiempo real por varios usuarios
al mismo tiempo.
• Permite compartir y/o publicar los documentos en la Web directamente, así como
lanzar un chat en directo mientras se realiza la presentación del mismo.
• Permite reproducir vídeos y soporta estos formatos: WebM, AVI, MPEG4, 3GPP, MOV,
WMV, FLV, MPEG2.
• Permite trabajar con los documentos, incluso sin disponer de conexión a Internet en el
modo desconexión u offline.
• Creación fácil de formularios web que guardan los valores introducidos en una hoja
de cálculo asociada.
Puedes encontrar más informa-
ción sobre Google Docs en el
documento SMR_AW_GDOCS.
pdf.
CEO
En la dirección http://youtube
/5CGP_jFk7fI, puedes encon-
trar un interesante vídeo sobre
Google Docs, titulado Google
Docs, Así de sencillo.
WebFig. 1.77. Bienvenida a Google Drive que integra Google Docs.
Fig. 1.78. Lista de aplicaciones de
Google Docs.
Caso práctico 17
(Continúa)
53
1 Aplicaciones web sociales
Caso práctico 17
(Continuación)
Fig. 1.80. Nombre del documento.
2. Para crear un documento, haremos clic en el botón Create (Crear), donde podre-
mos ver los diferentes tipos de documentos que podemos crear en Google Drive
(Fig. 1.78). Haremos clic en Documento, para crear un documento de texto.
3. Cuando creemos el documento, se nos mostrará una vista muy similar a los
editores de texto que conocemos, con un menú y una barra de formato en la
parte superior, y la hoja de texto, en la que podremos escribir. Puedes rellenar
el documento con el contenido que desees (Fig. 1.79). Dado que es una apli-
cación que trabaja on-line, no hará falta guardar el documento, ya que se van
guardando los cambios a medida que vamos escribiendo.
4. El nombre del documento aparece en la parte superior izquierda de la
ventana. Para cambiarlo no tendremos más que hacer clic en él para
que nos muestre el diálogo de cambio de título (Fig. 1.80).
5. Ahora, para compartir nuestro documento, haremos clic en el botón
Share (Compartir) de la parte superior derecha de la pantalla, y vere-
mos el siguiente cuadro de diálogo para compartir el documento
(Fig. 1.81), con el enlace de compartición y el tipo de acceso.
6. El tipo de acceso puede ser: público (cualquiera puede buscar y acce-
der al documento), visible solo para quien disponga del enlace, o bien
privado para un grupo de personas.
Haremos clic en la opción Change (Cambiar) y elegiremos que cualquiera
con el enlace pueda editar (can edit) nuestro documento (Fig. 1.82).
• Ahora, no tenemos más que copiar el enlace y enviarlo por correo a nuestros
colaboradores. Comprueba cómo pueden acceder a él y hacer modificaciones.
Fig. 1.79. Procesador de textos en Google Drive.
Fig. 1.82. Compartir con enlace.
Fig. 1.81. Opciones de compartición.
Fig. 1.83. Compartir con gente. Cuando el documento es privado, podemos añadir
un listado de direcciones con quienes compartir el documento.
Aplicaciones web sociales1
54
Crear formularios y distribuirlos con Gogle Docs
Duración: 10 minutos Dificultad: fácil
Objetivo: crear un formulario mediante Google Docs.
Material y herramientas: cuenta activa en Google.
Solución:
Además de documentos de texto, Google Docs permite la creación de otros tipos
de documentos, tales como hojas de cálculo, presentaciones o formularios. En este
Caso práctico vamos a ver cómo crear un formulario con esta herramienta.
• En primer lugar, nos situamos en nuestra unidad de Google Drive y hacemos
clic en el botón Crear, tal y como hicimos para crear un documento en el
Caso práctico anterior. En este caso, escogeremos crear un formulario.
Aparecerá ahora la plantilla para crear formularios. En ella, distinguimos la parte
superior, donde tenemos opciones generales de diseño y compartición del formu-
lario, seguido del título y la descripción de este. Abajo, nos encontramos con los
diferentes elementos que contendrá el formulario. Cada uno de estos elementos se
compone de un título, un texto de ayuda y un tipo de elemento del formulario (texto,
párrafo, elemento de elección múltiple, una escala o una parrilla).
• Añadimos como título «Aplicaciones web», y como texto «Encuesta sobre apli-
caciones web» (Fig. 1.85).
• Nos ubicaremos sobre la Sample Question 1, y hacemos clic en el lápiz de la
parte derecha para editarla (como ves, puedes editar una pregunta, borrarla o
clonarla). Rellenaremos la información como se muestra en la Figura (Fig. 1.86).
• Ya no nos queda más que hacer clic en Done para ver el resultado, y lo guar-
damos con Save. Ahora ya podemos compartir el formulario o mandarlo por
correo. En la parte inferior proporcionará el enlace público.
Caso práctico 18
Fig. 1.84. Plantilla de creación de formularios.
Fig. 1.86. Edición de pregunta.
Fig. 1.87. Enlace público del formulario.
Fig. 1.85. Título y texto del
formulario.
55
1 Aplicaciones web sociales
Creación de un Site de Google
Duración: 5 minutos Dificultad: fácil
Objetivo: crear un site en Google.
Material y herramientas: cuenta activa en Google.
Solución:
• Accedemos a sites.google.com y nos logueamos con nues-
tro usuario de Google.
• Hacemos clic en el botón Crea situado a la izquierda de
la pantalla.
• En la ventana siguiente, elegiremos el título del site, su
dirección y si deseamos crear el sitio a partir de una planti-
lla o en blanco. Elegiremos plantilla en blanco, pondremos
un nombre disponible para el site, rellenamos el captcha, y
haremos clic en Crear.
• En este momento, ya tenemos creado nuestro site.
Caso práctico 19
4.6. Integración en Google Sites
Google pone a nuestra disposición, dentro de Google Apps, la herramienta Google
Sites, orientada a la creación de sitios web o intranets de forma sencilla, sirviendo de
punto de acceso a las herramientas de trabajo colaborativas. Google Sites permite crear
páginas a partir de plantillas, modificar su código HTML, manejar archivos adjuntos,
añadir calendarios, contenido multimedia, presentaciones, fotos y diferentes niveles de
acceso a los recursos.
En la página principal del site, se nos muestra en la parte superior la información sobre
nuestra conexión. En la parte derecha, tenemos el siguiente menú, con las principales
opciones del sitio (Fig. 1.89).
Para editar la página en la que nos encontramos, no tenemos más que hacer clic en el
lápiz de Edición de página, y observaremos una ventana similar a la de un editor de
texto (Fig. 1.90):
• •
Fig. 1.88. Creación de un sitio.
Fig. 1.90. Edición de página.
32. Añade un contenido de
presentación a tu site de
Google, con información
acerca de ti, tu centro y
tu clase. Observa que
también puedes editar la
página en HTML.
Actividades
Fig. 1.89. Opciones principales.
Edición
de página
Añadir
página
Otras
opciones
Aplicaciones web sociales1
56
Cuando hagamos clic en la opción Más, se nos desplegará un menú con varias opcio-
nes, la más interesante es la de Administrar sitio, a través de la cual accederemos al
menú de administración de nuestro site. En este menú de administración, disponemos de
varias opciones, entre las que podemos destacar:
• Actividad reciente del sitio. Donde veremos qué nuevos recursos se han añadido y qué
han hecho los usuarios que han accedido.
• Páginas. Muestra las páginas que componen nuestro sitio.
• Archivos adjuntos. Donde podemos consultar los archivos y las revisiones que se han
ido subiendo al sitio.
• Plantillas de páginas. Nos muestra un listado de los diferentes tipos de páginas (plan-
tillas) que podemos usar para nuestras páginas.
• General. Con las opciones generales del site (nombre, descripción).
• Compartir y permisos. Similar a cuando compartimos documentos en Drive. Determi-
namos quién puede acceder al sitio y quién no.
• Dirección web. Donde configurar la URL del site.
• Presentación del sitio. Donde modificaremos el diseño y la organización de nuestro
sitio (cabeceras, barra, pie...).
• Colores y fuentes. Para modificar el aspecto de algunos elementos del sitio.
• Temas. Para cambiar completamente el aspecto de nuestro site con temas prediseñados.
Google Sites permite añadir a nuestras páginas multitud de gadgets. Vamos a ver en
el siguiente Caso práctico cómo añadir un gadget para Google Calendar en nuestro
site.
Google Calendar en Google Sites
Duración: 10 minutos Dificultad: fácil
Objetivo: añadir el gadget de Google Calendar a Google Sites.
Material y herramientas: cuenta activa en Google y disponer de un calen-
dario creado.
Solución:
• Creamos una página nueva desde el Botón Añadir página del menú
principal.
• Llamaremos a la nueva página «Calendario», y marcaremos para
ubicarla en el nivel superior (Fig. 1.91)
• Una vez en la nueva página, observamos su menú superior (Insertar
> Formato> Tabla > Diseño), y hacemos clic en Insertar, seleccio-
nando la opción Calendar (Fig. 1.82).
• En la siguiente ventana, seleccionaremos el calendario a insertar en
la página. Elegimos nuestro calendario y pulsamos en Seleccionar.
• En la siguiente ventana, elegiremos las opciones del calendario
(altura, ancho, tipo de vista, etc.). Dejamos las opciones por defecto
y hacemos clic en Guardar.
Caso práctico 20
Fig. 1.91. Nueva página.
(Continúa)
57
1 Aplicaciones web sociales
Caso práctico 20
(Continuación)
• Hecho esto, ya tendremos el gadget del calendario insertado
en la página. Si deseamos cambiar alguna de sus propieda-
des, no tenemos más que hacer clic encima del gadget para
ver sus opciones (Fig. 1.95)
Para ver el resultado hacemos clic en Guardar, en el borde superior
derecho de la ventana, y observamos los resultados.
33. Accede al sitio https://
sites.google.com/site/
webscolaborativas/, e in-
vestiga sobre cómo ges-
tionar páginas, menús y
añadir nuevos gadgets o
documentos.
Actividades
Google Sites ofrece muchísimas más posibilidades, que podrían ocupar un libro
entero por ellas mismas. En este epígrafe, hemos visto cómo editar páginas y añadir
gadgets a ellas para integrar nuestros calendarios, etc. En el siguiente enlace, tienes
una guía muy completa con todo lo que puedes hacer en Google Sites para el trabajo
en grupo: https://sites.google.com/site/webscolaborativas/.
Web
Fig. 1.92. Opciones de insertar.
Fig. 1.93. Elección del calendario.
Fig. 1.94. Opciones del calendario.
Fig. 1.95. Propiedades del gadget, alineación y envoltura.
Aplicaciones web sociales1
58
5. Integración de aplicaciones web en
el escritorio
Cuando hablamos de integración de aplicaciones web en el escritorio, nos referimos a
la posibilidad de utilizar nuestras aplicaciones web, tales como el correo o el calenda-
rio, sin que debamos recurrir a ellas a través del navegador, como si se tratase de una
aplicación más de nuestro ordenador.
5.1. Site-Specific Browser
Las Site-Specific Browser (SSB) son aplicaciones que nos permiten acceder a aplicacio-
nes web, bien en Internet o en una red local, desde un único punto, simplificando la
interfaz que pueda ofrecer un navegador web (sin menús ni barras), de modo que se
comporten como aplicaciones de escritorio, pudiendo tener accesos en los menús del sis-
tema o iconos en el escritorio. Las aplicaciones web más susceptibles de ser accesibles
a través de SSB son las redes sociales o sistemas de gestión empresarial.
Una de las aplicaciones SSB que más éxito tuvo fue Mozilla Prism que, bien como
aplicación, bien como extensión para Firefox, permitía crear accesos en nuestro sis-
tema a aplicaciones web. Mozilla abandonó el proyecto en 2011, para centrarse en
Chromeless, una idea más ambiciosa, consistente en eliminar la interfaz del navegador
y reemplazarla con una plataforma que permitiese la creación de nuevas interfaces
con HTML, CSS y JavaScript. Esto permitía a los desarrolladores crear aplicaciones
con tecnologías web estándar e interactuar con el sistema a través de un conjunto
mínimo de API, pero deja al usuario sin la posibilidad de crear sus propios accesos a
aplicaciones.
Actualmente, el navegador web Google Chrome (junto con su versión basada total-
mente en código abierto Chromium) permite acceder a una aplicación web como si
se tratase de una aplicación nativa, con sus ventanas, procesos e iconos en el escri-
torio.
SSB con Google Chrome
Duración: 5 minutos Dificultad: baja
Objetivo: crear accesos directos a aplicaciones web a través de Google Chrome.
Solución:
Google Chrome permite acceder a una aplicación web como si se tratase de una
aplicación web nativa, con sus ventanas, procesos e iconos en el escritorio. En el
siguiente caso, crearemos un acceso directo a la aplicación de correo Gmail.
• Abrimos el navegador Chrome/Chromium, y accedemos a la dirección web
de la aplicación que deseamos convertir.
• Una vez cargada la aplicación, pulsamos sobre el icono de personalización
y control de Chrome, , ubicado en el borde superior derecho, y selecciona-
mos Herramientas > Crear accesos directos a Aplicaciones.
• En la ventana que nos muestra, indicaremos dónde queremos que se ubiquen
los accesos directos (Fig. 1.96). En función del entorno gráfico que utilicemos,
podremos crear los accesos, por ejemplo, en el escritorio, en el menú de ini-
cio o en la barra de Inicio rápida. Elegimos en el escritorio.
• Hecho esto, tendremos el icono de Gmail en el escritorio. Accede a él y
observa cómo han desaparecido las barras de navegación y menús.
Caso práctico 21
34. ¿Qué ventajas piensas
que puede tener el uso de
accesos directos a aplica-
ciones web, en lugar de
acceder a ellas a través
del navegador?
Actividades
Fig. 1.96. Accesos directos con Chrome.
Puedes descargarte Google
Chrome para Windows y GNU/
Linux en diferentes formatos a
través de la siguiente dirección
web:
ht tps://w w w.goog le .com/
chrome/?hl=es
En entornos GNU/Linux, si
deseamos instalar Chromium, ins-
talaremos el paquete Chromium-
browser.
sudo apt-get install
chromium-browser.
Web
En el sistema Mac OS X, existe
la aplicación Fluid que permite
convertir aplicaciones web en
aplicaciones web de escritorio,
tal y como hacía Prism.
¿Sabías que…?
59
1 Aplicaciones web sociales
5.2. Widgets en el escritorio
Los widgets (window-gadget) son pequeños programas que aportan determinadas fun-
cionalidades, muy simples y concretas, desde consultar la previsión meteorológica, hasta
leer el correo o consultar nuestra agenda. Inicialmente aparecidos en el entorno Mac
OS X, fueron posteriormente importados por Yahoo! a ordenadores personales.
Existen varios sistemas de widgets, como Super Karamba, Yahoo Widgets, Google Gad-
gets o Screenlets. En el siguiente caso práctico, vamos a ver cómo instalar y configurar
Screenlets en Ubuntu.
Screenlets en Ubuntu
Duración: 10 minutos Dificultad: baja
Objetivos: instalar el Screenlet de aviso de correo de Gmail e integrarlo en la barra lateral. Configurar el acceso directo
a aplicaciones web.
Solución:
Screenlets es un conjunto de utilidades que podemos situar libremente en el escritorio. Utilizan un gestor principal (Screen-
lets Manager), desde el que podemos instalar, activar o desactivar widgets.
Instalación de Screenlets
1. Dado que Screenlets se incluye en los repositorios oficiales de Ubuntu, vamos a añadir manualmente los repositorios
de Screenlets. Desde la línea de comandos, ejecutaremos las siguientes órdenes:
sudo add-apt-repository ppa:screenlets/ppa
sudo apt-get update
sudo apt-get install screenlets
sudo apt-get install screenlets-pack-all
2. Para ejecutar Screenlets, empezamos a escribir en el Dash de Unity
(icono de inicio) «screenlets», con lo que nos aparecerá en la sección
de aplicaciones y no tendremos más que hacer clic en ella.
Una vez arrancado, tendremos el icono de Screenlets en el área de
notificación, desde donde podremos controlar más rápidamente los
Screenlets.
3. En el Administrador de Screenlets, buscamos el Screenlet Sidebar,
para activar la barra lateral donde ubicaremos de manera ordenada
nuestros widgets. Deberemos marcar las opciones de la izquierda
Iniciar/Parar y, si deseamos que la barra lateral arranque al inicio,
marcaremos Auto-arrancar al inicio y veremos cómo aparece la barra
lateral a la derecha de la pantalla.
Caso práctico 22
(Continúa)
Fig. 1.97. Búsqueda de la aplicación Screenlets.
Fig. 1.98. Administración de Screenlets.
Aplicaciones web sociales1
60
Caso práctico 22
(Continuación)
4. Del mismo modo, procederemos con el Screenlet de Gmail. Marcamos Arrancar al inicio e Iniciar, y observaremos el
icono del Desklet de Gmail en el escritorio. Para asociarlo a la barra lateral, no tenemos más que arrastrarlo a ella, y
veremos cómo este se «pega» a ella.
5. El último paso que nos queda pues es configurar el Desklet para acceder a nuestra cuenta de Gmail. Para ello, des-
plegaremosel menú del Desklet, que aparecerá en la parte superior derecha del icono, al lado del aspa (Fig. 1.99)
cuando hagamos clic sobre él. En la ventana de configuración del GMailScreenlet, buscaremos la pestaña Gmail, y
en ella configuraremos nuestro usuario y contraseña de Gmail. Hecho esto, se nos notificará el correo pendiente de
leer que tenemos en nuestra cuenta.
6. En el nuevo widget, cuando hagamos clic sobre el aviso de los mensajes sin leer, nos enlazará directamente a gmail.com.
Accesos directos a aplicaciones web
Al igual que Chrome, en Screenlets podemos crear accesos directos a aplicaciones web y acceder a ellas mediante un
Screenlet. Para ello:
7. En el Administrador de Screenlets seleccionamos la opción Instalar.
8. En la ventana Instalar seleccionamos Instalar aplicación web.
9. Escribimos la dirección web (https://mail.google.com), y el nombre de la aplicación «Mi Correo», y aceptamos.
10. Hecho esto, ya tendremos un Screenlet listo para acceder directamente a nuestro correo.
35. Activa el Screenlet de Google Calendar y configúralo para acceder a tu calendario.
36. En Gnome Look (http://gnome-look.org/index.php) tienes gran cantidad de Des-
klets que puedes descargarte e instalar. Escoge el que más te guste e instálalo
en tu máquina a través del Administrador de Screenlets mediante Instalar > Ins-
talar Screenlet.
Actividades
Fig. 1.99. Confi guración del Screenlet.
Fig. 1.100. Creando accesos directos a Gmail con Desklets.
2
1
3
61
1 Aplicaciones web sociales
Cuando instales aplicaciones en
Google Chrome, debes tener en
cuenta que algunas de ellas pue-
den requerir conexión a Internet.
Claves y consejos
Instalación de aplicaciones en Google Chrome
Duración: 10 minutos Dificultad: baja
Objetivo: instalar la aplicación Google Drive en el navegador web Google Chrome.
Solución:
1. Abrimos el navegador web Google Chrome y accedemos a la dirección https://chrome.google.com/webstore para
acceder a la Chrome Web Store.
2. En la parte izquierda de la ventana, se muestran las diferentes categorías en que se agrupan las aplicaciones. Busca-
remos en Productividad > Aplicaciones de Oficina.
3. Buscamos Google Drive en la lista de aplicaciones que nos aparecen. (Otra forma hubiese sido buscar directamente
Google Drive en el cuadro de búsqueda que aparece en la parte superior.)
4. Cuando seleccionamos la aplicación que deseamos instalar, iremos a una página con una descripción sobre la apli-
cación. Pulsaremos en el botón +Añadir a Chrome y aceptamos la instalación.
Hecho esto, ya tendremos Google Drive en nuestra página inicial de Chrome.
Caso práctico 23
5.3. Aplicaciones en el navegador
Una tendencia que está aumentando en los últimos años es la de incluir aplicaciones
directamente en el navegador web. Ejemplo de ello son la Chrome Web Store, para
Chrome/Chromium o el Mozilla Marketplace, así como la App Store de Apple para iOS
y Google Play para Android.
Chrome Web Store fue lanzada el 7 de diciembre de 2010, y ofrece aplicaciones, ex-
tensiones y temas visuales para el navegador. Permite añadir aplicaciones a cualquier
desarrollador y adquirirlas a los usuarios que lo deseen.
5.4. Del escritorio a la nube
La tendencia actual de computación en la nube no es ajena al entorno de escritorio de
los usuarios. Cada vez más, tendemos a ubicar, además de nuestros datos, nuestras
aplicaciones directamente en la nube. Ya hemos visto cómo aplicaciones como Google
Apps ofrecen una completa suite ofimática en la nube, haciendo cada
vez menor la separación entre aplicaciones de escritorio y aplicaciones
web.
Un paso más allá, nos encontramos con los sistemas operativos orienta-
dos a la nube (cloud-centric OS), que ofrecen un mínimo sistema operati-
vo, cuyas aplicaciones corren directamente en la nube. Ejemplos de ellos
son Jolicloud, Peppermint, gOS, EasyPeasy, MeeGo, y cómo no, Google
Chrome OS, que se ejecuta sobre el navegador web Google Chrome.
Peppermint (http://peppermintos.com/), por ejemplo, es un sistema Linux
con el entorno de escritorio ligero LXDE, y que utiliza los mecanismos que
ofrece Chromium para acceder a aplicaciones web como si fuesen apli-
caciones nativas. En la imagen (Fig. 1.102), podemos ver cómo utiliza el
editor de imágenes on-line Pixl y la herramienta de retoque de imágenes
Pixlr-o-matic como herramientas gráficas propias, así como Google Docs
y otras herramientas on-line de Google como sus aplicaciones ofimáticas.
Fig. 1.101. App de Google Drive.
Fig. 1.102. Peppermint.
Aplicaciones web sociales1
62
5.5. Escritorios web
El paradigma de escritorio en la nube llega a su máxima expresión con los conocidos
webOS, o sistemas operativos web. Se trata de aplicaciones web que emulan el com-
portamiento de un sistema operativo completo, con su entorno gráfico y aplicaciones,
y al que accedemos a través de un navegador web. Estas aplicaciones se enmarcan
dentro de las PaaS (Platform as a Service) y SaaS (Software as a Service).
Con los webOS podemos acceder a nuestro escritorio virtual desde cualquier punto del
mundo o dispositivo, únicamente a través de un navegador web.
El proyecto de software libre EyeOS se enmarca dentro de este tipo de escritorios. Un
sistema operativo multiplataforma de computación cloud, que responde a la nueva con-
cepción de Internet como plataforma de servicios. El proyecto, ideado en España, per-
mite acceder en línea al escritorio y sus aplicaciones desde cualquier lugar del mundo
mediante un navegador con soporte Ajax, Java y Flash. Está orientado principalmente al
trabajo en equipo, dado que todos los documentos creados pueden ser compartidos con
cualquier usuario del sistema. EyeOS, hasta su versión 2.5, es un proyecto de código
abierto, con licencia AGPLv3. En septiembre de 2011 lanzó su primera licencia comer-
cial bajo el nombre de EyeOS Profesional Edition.
Otra plataforma libre de similares características es Lucid-Desktop (http://www.lucid-
desktop.org/), un entorno de escritorio web con bastantes aplicaciones por defecto:
visor de imágenes, editor de textos, reproductor de audio... También viene con un lector
de RSS, algunos juegos, calculadora e incluso una terminal. Además, podemos instalar
aplicaciones de terceros que amplían su funcionalidad.
Instalación de un servidor Lucid-Desktop
Duración: 15 minutos Dificultad: media
Objetivo: instalar Lucid-Desktop sobre el stack de Bitnami.
Requisitos: necesitamos tener el stack LAMP de Bitnami instalado.
Solución:
El escritorio web Lucid-Desktop es una aplicación desarrollada en PHP y JavaScript que requiere de un servidor web para
su ejecución. En nuestro caso, vamos a utilizar el stack LAMP de Bitnami en nuestra carpeta de usuario.
Preparación de la base de datos
1. En primer lugar, vamos a crear la base de datos MySQL que necesitaremos para la instalación. Para ello, abriremos
un terminal e invocaremos al intérprete de MySQL.
joamuran@ubuntu:~$ lampstack-5.3.14-0/mysql/bin/mysql -u root -p
Enter password:
Con esto, invocaremos al intérprete MySQL dentro de nuestra carpeta de instalación lampstack-5.3.14-0. Si tienes la
pila instalada en cualquier otra ubicación, deberás indicar la ruta correcta hasta el ejecutable de MySQL de tu insta-
lación de Bitnami.
Con la instrucción anterior hemos invocado el intérprete del gestor de bases de datos MySQL como el usuario root
(opción -u) y hemos indicado que nos pida su contraseña (-p). Introducimos la misma contraseña que se nos pidió en
la instalación de MySQL en Bitnami para el usuario root.
Si todo va bien, aparecerá el siguiente mensaje de bienvenida y el intérprete de MySQL:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 20
Server version: 5.5.21 MySQL Community Server (GPL)
Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type ‘help;’ or ‘\h’for help. Type ‘\c’ to clear the current input statement.
mysql>
Caso práctico 24
(Continúa)
En el CEO dispones del docu-
mento APW_U1_EYEOS.pdf, con
un ejemplo sobre cómo crear
una instalación de EyeOS sobre
el stack de Bitnami.
También tienes un pequeño tuto-
rial de cómo se utiliza EyeOS y
cómo se administran sus aplica-
ciones.
CEO
En epígrafes anteriores vimos
cómo instalar el stack de base
de bitnami (documento APW_
U1_StackBitnami.pdf), que te va
a hacer falta para el siguiente
Caso práctico.
Recuerda
63
1 Aplicaciones web sociales
Caso práctico 24
(Continuación)
2. Ahora deberemos introducir la siguiente instrucción para crear la base de datos:
mysql> create database lucid;
Si todo va bien, nos mostrará el mensaje siguiente:
Query OK, 1 row affected (0.00 sec)
Y ya podremos salir del intérprete de MySQL:
mysql> exit
Bye
joamuran@ubuntu:~/lampstack-5.3.14-0/mysql$
Descarga y descompresión de Lucid-Desktop
3. Descargamos Lucid OS desde http://www.lucid-
desktop.org/download/ y lo copiamos a la carpeta
htdocs de nuestra instalación del stack de Bitnami.
~$ cp Descargas/lucid-1.0.1.tar.gz ~/
lampstack-5.3.14-0/apache2/htdocs/
4. Descomprimimos el contenido en htdocs:
joamuran@ubuntu:~/lampstack-5.3.14-0/apache2/htdocs$ tar xvzf lucid-1.0.1.tar.gz
Instalación web
5. Procedemos a su instalación a través de la Web. Accedemos a la dirección http://localhost:8080/lucid-1.0.1/install/,
y seguimos los pasos que se indican (ten en cuenta que el puerto 8080 puede variar en tu instalación si ya lo tenías
usado).
La instalación es bastante sencilla y guiada, pero deberemos tener algunos detalles en cuenta. Veamos el proceso de
instalación en las siguientes figuras:
Fig. 1.103. Descarga de Lucid OS.
Fig. 1.104. Instalación de Lucid-Desktop (1). (Continúa)
Aplicaciones web sociales1
64
Caso práctico 24
(Continuación)
Este es el paso más crítico, donde configuraremos la base
de datos. En él deberemos seleccionar:
• Base de datos: MySQL.
• Host: localhost: 3307 o localhost: 3306, según como
hubieses configurado MySQL.
• Nombre de la base de datos: lucid.
• Prefijo de las tablas: lucid_.
• Password: el de tu base de datos.
Fíjate bien a la hora de introducir estos parámetros correc-
tamente, ya que una mala configuración impedirá que pue-
das finalizar la instalación.
(Continúa)
Fig. 1.105. Instalación de Lucid-Desktop (2).
Seleccionamos una instalación limpia.
Fig. 1.106. Instalación de Lucid-Desktop (3).
Fig. 1.107. Instalación de Lucid-Desktop (4).
Fig. 1.108. Instalación de Lucid-Desktop (5).
Confi guramos la contraseña del administrador y la posibilidad de
crear cuentas anónimas.
Fig. 1.109. Instalación de Lucid-Desktop (6).
65
1 Aplicaciones web sociales
Caso práctico 24
(Continuación)
Y, finalmente, ya podemos acceder a través de: http://localhost:8080/lucid-1.0.1/:
Fig. 1.110. Instalación de Lucid-Desktop (7). Fig. 1.111. Instalación de Lucid-Desktop (8).
Fig. 1.112. Accediendo a Lucid-Desktop.
Fig. 1.113. Lucid-Desktop en funcionamiento.
Aplicaciones web sociales1
66
Síntesis
Web 1.0 .
Web 1.5.
Diseño web
Entornos.
XHTML.
CSS.
Diseño web en la nube: Weebly.
Wikis.
Estructura de una página HTML.
Elementos y atributos HTML.
Selectores.
Ubicación.
Google Apps
para trabajo
colaborativo
Correo web: Gmail.
Calendario web: Google Calendar.
Blogger.
Google Groups.
Ofmática web: Google Docs o Drive.
Integración con Google Sites.
Integración
de aplicaciones
web en el
escritorio
Site Specific Browser.
Widgets en el escritorio.
Aplicaciones en el navegador.
Del escritorio a la nube.
Escritorios web.
Identidad digital.
Sistemas de identificación global.
Habilidades digitales.
La social media
Internet, la Web y sus aplicaciones.
Protocolos y estándares.
Aplicaciones web.
Aplicaciones web interactivas (RIA).
Servicios web.
Navegadores web.
La web social
Social media.
Web 2.0.
Web semántica.
Navegadores web de escritorio.
Navegadores web móviles.
Videoconsolas, TV.
Aplicaciones
web sociales
67
1 Aplicaciones web sociales
Test de repaso
Soluciones: 1a, 2b, 3d, 4c, 5d, 6a, 7b, 8c, 9b, 10c, 11a, 12d,
13a.
1. ¿Cuántas etapas web ha habido hasta la actualidad?
a) Tres, la Web 1.0, la 1.5 y la 2.0.
b) Cuatro, las anteriores y social media.
c) Cinco, las anteriores y la web semántica.
d) Ninguna de las anteriores respuestas es correcta.
2. ¿Cuántos tipos de aplicaciones web son utilizadas por
los humanos?
a) Una, las aplicaciones web.
b) Dos, las web y las interactivas.
c) Tres, las anteriores y los servicios web.
d) Ninguna de las anteriores respuestas es correcta.
3. ¿Qué sistema operativo móvil no dispone de un nave-
gador web propio de su misma empresa?
a) Apple.
b) Microsoft.
c) Google.
d) Blackberry.
4. Indicar la afirmación falsa:
a) Un prosumidor es la combinación de un productor +
consumidor.
b) Un influencer es un famoso en el social media que
tiene muchos seguidores.
c) Un influmidor es un famoso que consume mucha
información sin producir nada por su parte.
d) Ninguna de las anteriores respuestas es correcta.
5. ¿Cómo podría buscar información en un buscador
sobre mi ciudad y mi provincia?
a) «Ciudad» «Provincia».
b) «Ciudad» OR «Provincia».
c) «Ciudad» + «Provincia».
d) Todas las anteriores respuestas son correctas.
6. ¿Cuál de los siguientes editores HTML trabaja on-line?
a) Tinkerbin.
b) Amaya.
c) Bluefish.
d) Ninguna de las anteriores respuestas es correcta.
7. ¿Qué etiqueta se utiliza para poner un comentario en
una página web?
a) Entre los símbolos <comment>
b) Entre los símbolos <!-- y -->.
c) Entre los símbolos </* y */>
d) Ninguna de las anteriores respuestas es cierta.
8. ¿Cómo se puede compartir un documento on-line con
Google Docs en modo solo lectura?
a) Enviando una invitación de redactor.
b) Enviando una invitación de propietario.
c) Enviando una invitación de lector.
d) Ninguna de las anteriores respuestas es cierta.
9. ¿Con qué está hecho Google Docs?
a) Solo con tecnología HTML y CSS.
b) Utilizando tecnología AJAX.
c) Su código fuente es LAMP o WAMP.
d) Ninguna de las respuestas anteriores es cierta.
10. ¿Cuál de las siguientes aplicaciones no se corresponde
con una aplicación para SSB?
a) Fluid.
b) Prism.
c) Peppermint.
d) Ninguna de las respuestas anteriores es cierta.
11. ¿Cómo activamos en el gestor de Screenlets un Screen-
let concreto?
a) Mediante la opción Iniciar/Parar.
b) Mediante Auto-arrancar al inicio.
c) Mediante la opción Instalar.
d) Ninguna de las respuestas anteriores es cierta.
12. ¿Cuáles de los siguientes sitios permiten la descarga de
aplicaciones web para móvil o navegador?
a) Chrome Web Store.
b) Mozilla Marketplace.
c) Google Play.
d) Todas las anteriores son ciertas.
13. Dado el siguiente código HTML y CSS:
<html> <body>
<h1 class=”mititulo”> Ejercicio 13</h1>
<p>Párrafo primerol</p>
<p id=”miparrafo”>Párrafo segundo</p>
</body> </html>
body{ background-color: yellow;
font-family: ubuntu,arial,sans-serif; }
.mititulo{ font-size: 30px;
background-color: #ffffff; }
#miparrafo{ font-style:italic; }
¿Cuál de las siguientes afirmaciones es falsa?
a) El texto «Ejercicio 13» aparecerá en fondo amarillo,
tamaño de fuente 30 y letra Ubuntu.
b) El texto «párrafo primero» aparecerá en fondo ama-
rillo y letra Ubuntu.
c) El texto «párrafo segundo» aparecerá en fondo ama-
rillo y letra Ubuntu itálica.
d) Todas las anteriores.
Aplicaciones web sociales1
68
Comprueba tu aprendizaje
Identificar diferentes aplicaciones web.
1. Relaciona, en una tabla similar a esta y en tu cua-
derno, el sistema operativo móvil con su servicio en la
nube y di qué empresa está detrás de cada plataforma
móvil.
Windows Phone Google Apps
Android newbay
Blackberry iCloud
iOS Azure
2. Investiga cuáles son los repositorios oficiales de apli-
caciones de las plataformas móviles. Intenta saber el
número de aplicaciones disponibles a instalar en cada
una de ellas. Indicando finalmente cuántas apps tienes
instaladasen tus dispositivos móviles.
3. Amplía la Tabla 1.1 sobre la evolución de la Web con
más parámetros que hayan sido comentados, como las
tecnologías asociadas, el tipo de consumo o cualquier
otra que tú conozcas.
Crear la identidad digital.
4. Haz EgoSurfing en las redes sociales, como Google+,
Facebook y Twitter u otras que utilices. ¿Existen más
personas que se llamen como tú parcialmente o com-
pletamente? En caso de que no puedas acceder a
estos servicios en tu centro, realiza la actividad desde
casa.
5. Configura tu cuenta de Twitter, introduce tus datos y tu
imagen. A continuación, hazte seguidor de tu profesor
y tus compañeros de clase. Y finalmente haz tu primer
tuit (tweet) de 140 caracteres. ¿Cuántos programas
o servicios diferentes conoces desde los que puedas
hacer un tuit? En caso de que no puedas acceder a
estos servicios en tu centro, realiza la actividad desde
casa.
6. Vuelve a entrar en tu panel de control de tu cuenta de
Google. ¿Qué ha cambiado desde la primera vez que
entraste hasta ahora?
Aprender los lenguajes de la Web.
7. Edita el código HTML de una página que elijas o te
indique tu profesor. ¿En qué versión de HTML crees que
está realizada? ¿Contiene referencias al CSS? Separa
la cabeza (head) del cuerpo (body) en dos nue-
vos archivos .html que se llamen así. ¿Qué crees que
pasará al abrirlos con el navegador?
8. Investiga qué etiqueta HTML necesitas para poner un
icono del logo de la empresa en la que trabajarás,
en la barra de direcciones de tu navegador al abrir
sus páginas web. Créate una imagen o logo personal
tuyo e insértalo en la página web de pruebas que
tengas.
9. El estándar HTML5, entre otras cosas, supone una
mejora en la estructuración de los documentos HTML,
con nuevas etiquetas como <header>, <section>,
<article>, <nav>, <footer>… Investiga acerca de
los estándares HTML5 y DOM2 y redacta una entrada
en tu blog donde realices una descripción y los compa-
res con sus predecesores.
Trabajar de manera colaborativa en la nube.
10. Redacta un post sobre los diferentes servicios de correo
electrónico que se ofrecen en Internet: Gmail, Yahoo!
Mail, Hotmail, Facebook mail u otros que utilices. Haz
una comparativa de sus características: espacio que
ofrecen, qué elementos organizativos utilizan, interfaz,
capacidad, si tienen apps para móvil u otras que consi-
deres oportunas.
11. Investiga y realiza una comparativa entre diferentes ser-
vicios de calendario on-line existentes: Google Calen-
dar, Anywr, Agenda Yahoo! y Zyb. Puedes plasmar tu
estudio en tu blog.
12. Busca noticias sobre agujeros de seguridad en aplica-
ciones web. Haz un resumen indicando los fallos detec-
tados y las posibles consecuencias que pueden tener
en el propio servicio o, de forma indirecta, en otros
servicios.
13. Crea tu propio glosario con aquellos términos que no
hayas entendido bien. Puedes utilizar una wiki, Google
Docs o un glosario en Moodle para hacer el ejercicio
en colaboración con otros compañeros.
14. Busca en Internet el vídeo más ilustrativo y de mayor
calidad, relacionado con lo que se ha estudiado en la
unidad. Sube el enlace de esta actividad donde te indi-
que tu profesor y explica por qué lo has elegido.
15. ¿Qué hecho histórico, de los comentados en esta uni-
dad, fue el más importante, según tu criterio? Razona y
justifica tu respuesta aportando más información.
16. Propón un último ejercicio para el examen, justificando
su enunciado y razonando su respuesta. Indica tam-
bién las fuentes web consultadas o la página del libro
donde se halla la solución. Consulta al profesor el for-
mato que debe tener (de desarrollo o de tipo test).
Y estudiaremos:
• Las características básicas de los sistemas
de gestión de contenidos.
• Conceptos, proceso y configuración
de la instalación de un sistema de gestión
de contenidos.
• La gestión de usuarios y perfiles.
• La administración básica del sistema
de gestión de contenidos siguiendo unos
requerimientos dados.
• Los diferentes módulos, su función
y configuración.
• Los mecanismos de copia
de seguridad y restauración.
• La actualización del sistema
de gestión de contenidos.
En esta unidad aprenderemos a:
• Identificar los requerimientos necesarios
para instalar gestores de contenidos.
• Realizar la instalación de un sistema
gestor de contenidos.
• Gestionar usuarios con varios perfiles.
• Personalizar la interfaz del gestor de
contenidos.
• Instalar y configurar los módulos
y menús necesarios.
• Realizar y restaurar copias
de seguridad.
• Actualizar el gestor de contenidos,
en especial las tareas
de seguridad.
• Llevar a cabo pruebas
de funcionamiento.
Sistemas gestores de contenidos
2Unidad
Sistemas gestores de contenidos2
70
1. ¿Qué es un sistema de gestión de contenidos?
Con esta denominación se conoce una herramienta de software que permite crear, orga-
nizar y publicar documentos y otros contenidos de forma colaborativa. Los sistemas de
gestión de contenidos (Content Management System, en adelante CMS) están formados
por un conjunto de aplicaciones web que, de un modo similar a un portal, operan tanto
en Internet como en una intranet.
Su principal ventaja consiste en el hecho de que permiten organizar y mostrar conteni-
dos sin que sea necesario poseer grandes conocimientos de programación web. Con
su ayuda se pueden generar y publicar noticias, crear taxonomías (sistemas de clasifi-
cación) con las que el administrador clasifica contenidos, insertar logotipos e imágenes
personalizadas o corporativas del portal, añadir secciones, administrar las bases de
datos de usuarios, etc.
1.1. Funciones básicas de un gestor de contenidos
Son las siguientes:
Creación de contenidos
Cualquier usuario que no tenga demasiados conocimientos sobre publicación web puede
generarlos gracias a los editores integrados. Por lo general, se trata de editores del tipo
WYSIWYG con los que se puede ver el aspecto final del documento a medida que se elabora.
Los CMS ofrecen la posibilidad de preparar diferentes tipos de documentos (noticias,
foros de discusión, libros en formato digital, etc.) según las necesidades del portal e
incluso crear nuevos tipos a partir de los tipos básicos.
Además, pueden incluir paquetes ofimáticos integrados, así como herramientas para la
importación de documentos y la edición de archivos XML.
Gestión de contenidos
Cuando un usuario crea un documento, se almacena en una base de datos junto con
otras informaciones de interés, como son el nombre del autor, las fechas de creación y
publicación, el tipo de documento, los permisos de acceso, etc.
Además, se consignan también los usuarios a los que se ha dado de alta, la estructura
del portal, los estilos y temas utilizados, así como toda la información generada a partir
de las funcionalidades del CMS.
Las labores de gestión de contenidos se pueden delegar o compartir con los usuarios.
Basta con asignarles un perfil determinado (editor, administrador, autor, etc.). El CMS
proporciona la infraestructura necesaria para que se comuniquen y garantiza la conse-
cución del ciclo de trabajo.
Publicación de contenidos
Cuando el usuario da por terminado un contenido, puede publicarlo en ese mismo mo-
mento o bien programarlo para que aparezca en una fecha determinada. Esta tarea se
lleva a cabo según el patrón general de diseño establecido en el gestor. De esta mane-
ra, se simplifica el trabajo y se garantiza que el CMS mantenga un aspecto homogéneo.
El autor, si su perfil se lo permite, podrá publicar el documento dentro de la sección para
la que han desarrollado esos contenidos.
Presentación del gestor de contenidos
Por lo general, los CMS siguen la normativa internacional de accesibilidad. Pueden
utilizarse desde cualquier navegador y permiten establecer el idioma, el huso horario e
incluso la moneda deseados.
En el CEO dispones del docu-
mento SMR_WEB_02_Historia.
pdf donde podrás encontrar
detallessobre los gestores de
contenido, su evolución histórica
y usos.
CEO
Fig. 2.1. Logo de WordPress. Puedes
encontrar logos de WordPress en
http://profesionalnet.wordpress.com/
2009/02/24/todos-los-logotipos-gratis/.
En los CMS, cuando se habla de
la granularidad en el acceso al
sitio, quiere decir que se puede
controlar «quién puede ver qué
del sitio web», y «quién puede
hacer qué en el sitio web».
¿Sabías que…?
Podemos encontrar ayuda ofi-
cial sobre WordPress en http://
ayudawordpress.com/.
En la dirección http://www.
masquewordpress.com/ayuda/
están disponibles los foros
donde podemos plantear dudas
o dar soluciones.
En Twitter: https://twitter.com/#!/
AyudaWordpress.
Facebook para ayuda de
WordPress: http://www.face
book.com/AyudaWordPress.
Web
71
2 Sistemas gestores de contenidos
1.2. Características generales de los sistemas gestores
de contenidos
La estructura de un CMS consta de los siguientes elementos:
• El frontend, la parte visible del CMS para los usuarios que acceden como invitados o
usuarios registrados.
• El backend, el área de administración del CMS donde se llevan a cabo todas las ta-
reas de actualización, configuración y gestión del sitio.
• Módulos para la configuración y personalización del sitio web.
• Gestor de usuarios, perfiles y derechos de acceso.
• Módulos para la gestión del contenido del sitio web (creación, edición, publicación
de contenidos, etc.).
• Plantillas para personalizar el aspecto o el diseño del sitio web.
• Extensiones que aumentan la funcionalidad del gestor de contenidos.
• Posibilidad de múltiples idiomas y localización.
1.3. Criterios de selección de un sistema gestor de contenidos
A la hora de crear un sitio web, es preciso establecer, en primer lugar, los objetivos que
se persiguen. Bastará con responder a unas cuantas preguntas básicas para determinar
la elección del gestor más adecuado. ¿Qué vamos a mostrar en el portal? ¿A qué tipo
de usuarios se dirigirá? ¿Qué se ofrecerá: productos, servicios...? ¿Cómo interactuarán
los visitantes con el portal? ¿Se dispone de recursos económicos para adquirir las herra-
mientas necesarias? ¿Quién se encargará del mantenimiento del portal?
A partir de estas cuestiones, debe plantearse una lista de criterios de selección que
ayuden a escoger un gestor u otro.
1. Código libre o propietario.
2. Arquitectura (escalabilidad, separación entre presentación y administración).
3. Soporte y desarrollo (garantías de que la herramienta puede ampliarse y mejo-
rarse).
4. Usabilidad y accesibilidad (facilidad de uso, adecuación a los estándares adoptados
a escala internacional).
5. Funcionalidad. El sistema gestor deberá proporcionar al menos:
• Edición WYSIWYG a través del navegador.
• Sindicación de noticias y artículos.
• Asignación de perfiles distintos para los usuarios.
• Soporte multilingüe.
• Soporte para varios navegadores.
• Personalización del entorno en función del usuario.
• Publicación programada y asignación de fechas de caducidad.
• Herramienta de búsqueda.
• Mecanismos de comunicación entre los usuarios del portal (foros, chat, correo
electrónico, etc.).
• Carga y descarga de documentación y material multimedia.
• Creación, actualización y restauración de copias de seguridad.
• Generación de estadísticas e informes.
1. ¿Por qué crees que se
puede necesitar un siste-
ma gestor de contenidos?
2. ¿Cuáles crees que son las
ventajas más importantes
de los gestores de conte-
nidos en comparación con
las herramientas tradicio-
nales de publicación web?
3. Averigua qué es el
workflow de publicación
o flujo de publicación de
un CMS.
4. ¿Por qué decimos que un
CMS permite la localiza-
ción?
5. ¿Qué diferencia existe
entre localización e inter-
nacionalización?
6. Localiza en Internet un
listado, lo más completo
posible, de los sistemas
gestores de contenidos
disponibles.
7. ¿Cómo es la escalabili-
dad de WordPress? ¿Es
WordPress escalable?
8. ¿Qué es el roadmap de
WordPress?
Actividades
Con la interpretación de la ver-
sión de WordPress podemos
conocer la envergadura de los
cambios realizados.
Si identificamos la versión por
X.Y.Z:
X es el número mayor de ver-
sión, identifica cambios impor-
tantes en el código fuente y
se mantiene la compatibilidad
hacia atrás.
Y es el número menor de versión,
identifica cambios importantes
de la funcionalidad. También se
mantiene la compatibilidad.
Z es el número de versión de
mantenimiento, cambia cuando
se realizan mejoras en la seguri-
dad de la aplicación o se corri-
gen errores.
Claves y consejos
Sistemas gestores de contenidos2
72
2. Sistema gestor de contenidos WordPress
WordPress es un CMS dinámico que permite la creación de sitios web para la publi-
cación de noticias, difusión de información, portales corporativos, sitios web para co-
mercio electrónico, etc. Es una aplicación web con licencia pública general GPL y está
escrita principalmente en lenguaje PHP. El sitio oficial del proyecto es http://wordpress.
org/ (en español está disponible el portal http://es.wordpress.org). Conviene estable-
cer la diferencia entre wordpress.org y wordpress.com: cuando se hace referencia a
wordpress.org se está hablando de WordPress como CMS; wordpress.com es el servicio
gratuito de blogs que permite la creación rápida y sencilla de blogs para los usuarios.
Las principales características de WordPress son las siguientes:
• Gestión del CMS completa vía web de forma sencilla.
• Organización de los artículos (entradas, posts) y páginas estáticas del sitio web me-
diante categorías, subcategorías y etiquetas.
• Creación y edición de contenidos utilizando un editor WYSIWYG.
• Permite guardar el artículo como borrador de forma automática y temporizada.
• Edición y configuración de todos los servicios que ofrece.
• Disponibilidad de gran variedad de plantillas o temas (themes) descargables.
• Utilización de plantillas configurables que definen la estructura del sitio. Admite la
utilización de widgets, aunque no todas las plantillas aceptan todos los widgets.
• Utilización de plugins que amplían la funcionalidad del sitio.
• Dispone de un administrador de archivos multimedia que permite gestionar todo tipo
de archivos de audio, vídeo, imágenes, etc., y utilizables en cualquier parte del sitio,
desde su navegador.
• Foros/encuestas de votación dinámicos con resultados inmediatos, estadísticas de
visitas, etc.
• Servidor de sindicación de noticias por RDF (RSS 1.0), RSS 2.0 y Atom.
• Permite insertar publicidad en el sitio.
• Permite la publicación mediante e-mail.
• Permite la búsqueda integrada Google.
• A partir de la versión 3, es multisite, es decir, partiendo de una única instalación,
permite configurar múltiples sitios.
• Multiplataforma: GNU/Linux, FreeBSD, MacOSX Server, Windows, Solaris, Android,
iOS, Blackberry y Symbian.
2.1. Elementos de WordPress
Los elementos básicos para el funcionamiento de WordPress son los siguientes:
1. Base de datos MySQL 5 que almacena en tablas diferenciadas toda la información
del sitio, así como gran parte de la configuración del sistema.
2. Motor PHP, 5.2.4 o superior, que ejecuta órdenes de búsqueda, almacenamiento,
consulta y modificación sobre la base de datos. Los datos obtenidos en estas opera-
ciones son transformados en páginas web, que son interpretadas y mostradas por los
navegadores y entendibles por los usuarios.
3. Servidor HTTP Apache 2.
Los elementos básicos en cuanto al aspecto y/o funcionalidad son los siguientes:
• Plantillas o temas.
• Extensiones: plugins.
WordPress tiene la opción de
compresión gzip activada.
De esa forma, puede ahorrar
ancho de banda. Pero, para
ello, el navegador utilizado debe
admitir este tipo de compresión.
Esta característica requiere que
el servidor web Apache tenga
activado el módulo mod_gzip.
¿Sabías que…?9. ¿Por qué decimos que
WordPress es un CMS
colaborativo?
10. Averigua cuáles podrían
ser las razones para mi grar
de Drupal a WordPress.
11. Cuando ya tengas ins-
talado WordPress en tu
equipo, haz un resumen
con las aplicaciones ins-
taladas que son necesa-
rias para que funcione.
Incluye también las ver-
siones de cada una de
ellas.
12. A partir de los datos
sobre WordPress de los
que dispones, ¿qué usos
o en qué áreas se podría
utilizar este CMS?
Actividades
73
2 Sistemas gestores de contenidos
2.2. Ventajas y características de WordPress
La premisa básica de WordPress es que el usuario se ocupe solo de la información
que quiera publicar y el sistema se encargue de gestionar todos los detalles técnicos y
administrativos.
Las ventajas que ofrece la utilización de WordPress como CMS son las siguientes:
• Es sencillo de instalar, configurar y administrar.
• La administración se realiza vía web desde cualquier ordenador conectado.
• Es un CMS en continuo crecimiento con gran cantidad de plugins (http://wordpress.
org/extend/plugins/).
• Se puede modificar su apariencia mediante la utilización de plantillas.
2.3. Estructura de las URL
En WordPress, y en general en cualquier CMS, la estructura de las URL o los llamados
permalinks va a condicionar la estética, usabilidad y compatibilidad de los enlaces.
Un permalink es un enlace permanente. Se suele utilizar en sitios web, gestores de con-
tenidos o blogs para asignar una URL permanente a cada entrada del sitio y así luego
poder referenciarla.
El permalink identifica de manera única un contenido sobre un tema, discusión o cues-
tión en el sitio de destino. De esta forma, facilita el acceso directo a otros usuarios que
puedan estar interesados en el contenido referenciado.
El permalink también se utiliza en páginas estáticas para mejorar su posicionamiento en
los buscadores.
WordPress dispone de varios esquemas para las URL. Se pueden ver en Ajustes > Enla-
ces permanentes.
La mejor estructura para las URL o permalinks es:
http://www.midominio.com/titulo-de-la-entrada
Por lo tanto, en Ajustes comunes, cambiar a la opción Nombre entrada. Pulsar en Guar-
dar los cambios.
2.4. Instalación de WordPress
Se puede realizar de varias formas. La más habitual consiste en instalar el paquete fuen-
te (paquete .tar.gz, descargable desde http://wordpress.org/download/) y proceder a
la compilación en la propia máquina en Ubuntu. En equipos Windows hay que instalar
el archivo ejecutable correspondiente.
También se puede recurrir a bitnami.org (http://bitnami.org/). Este procedimiento es
mucho más sencillo: el módulo correspondiente a WordPress incorpora el paquete
WAMP o LAMP, según se trabaje con Windows o con GNU/Linux, y la configuración
final corre a cuenta del propio instalador.
Si al abrir el navegador y acce-
der a WordPress nos devuelve
un mensaje de error del tipo
«La página no está disponible»
es debido a que el demonio
MySQLD no está ejecutándose.
En este caso, y desde una ter-
minal, deberemos ejecutar la
orden:
$./ctlscript.sh start
Otras opciones disponibles son
stop y restart.
Importante
1. La arquitectura de WordPress
permite la creación de exten-
siones que amplían su funcio-
nalidad y ámbito de utiliza-
ción como gestor de conteni-
dos. Su licencia permite estas
adaptaciones y desarrollos.
2. Empresas y organismos como
la CNN (http://business.blogs.
cnn.com/), Flickr (http://code.
flickr.com/blog/), Samsung
(http://www.samsung.com),
o Wall Street Journal (http://
blogs.wsj.com/law/) utilizan
WordPress.
¿Sabías que…?
Tienes disponible en el CEO
el ar chivo Instalacion_pila_bit-
nami.pdf, en el que se describe,
como caso práctico, la instala-
ción de la pila bitnami LAMP.
CEO13. ¿Por qué crees que es mejor utilizar la estructura Nombre entrada en los enlaces?
14. Si el idioma por defecto del portal fuera español, ¿un usuario determinado
podría tener su entorno en inglés?
15. Averigua cuál es la diferencia de estructura básica entre los CMS Drupal y
WordPress.
Actividades
Sistemas gestores de contenidos2
74
Ya tenemos el CMS WordPress instalado y en funcionamiento. El aspecto es el estándar,
que iremos modificando a lo largo de los casos prácticos de la unidad. Llamamos fron-
tend a esta interfaz de presentación.
Vamos a Meta > Acceder (solo aparece así la primera vez, luego lo encontraremos
como Administración del sitio) y llegamos así a la parte administrativa (backend) del
CMS (http://127.0.0.1:8080/wordpress/wp-admin/). Se solicita el usuario (admin, en
nuestro caso) y la contraseña asignada en el proceso de instalación.
La zona de administración de WordPress, también llamada Escritorio, permite la gestión
de usuarios, el aspecto visual (temas), categorías de entradas, páginas fijas, enlaces,
complementos (plugins), etc. Además, la interfaz de administración sirve para generar
entradas y las páginas del CMS.
En nuestro caso, la instalación en Ubuntu ha dejado toda la estructura de WordPress en
la carpeta /home/admin/lampstack-5.3.12-0/apps/wordpress. En una instalación Win-
dows estará en C:\Archivos de programa\BitNamiWAMPStack\apache2\htdocs.
Instalación del módulo WordPress
Duración: 10 minutos Dificultad: baja
Objetivo: instalar el módulo Bitnami de WordPress en
Ubuntu 12.04.
Utilidades: se requiere el módulo de WordPress descarga-
ble desde la página oficial http://bitnami.org/es/stack/
wordpress.
Para Ubuntu, se llama bitnami-wordpress-3.4.1-0-linux-insta-
ller.run. Para Windows, descargar el archivo bitnami-word-
press-3.4.1-0-module-windows-installer.exe.
Solución:
1. Descarga del archivo de instalación de WordPress para
Ubuntu
Ir a http://bitnami.org/stack/wordpress y descargar el
archivo correspondiente. El archivo debe ser ejecutable.
Para ello, abrir una terminal, ir al directorio que contiene el
archivo descargado y ejecutar:
chmod +x nombre _ archivo.run
Hacer doble clic sobre él o desde una terminal ejecutar la
orden:
$ bitnami-wordpress-3.4.1-0-linux-installer.run
2. Instalación
Arranca el proceso de instalación y solicita el idioma para
la instalación.
Seleccionamos el directorio de instalación y se crea la
cuenta del administrador. Asignar un nombre de usuario
administrador (admin) y una contraseña para acceder
como root a la base de datos MySQL.
A continuación, asignamos un nombre al blog que vamos
a crear (AulaWEB). Introducimos los datos para configurar
la cuenta de correo del CMS. Comienza la instalación del
CMS. Cuando termina, ofrece la opción de ejecutar la apli-
cación. Lanza la aplicación web y en el navegador muestra
la página http://127.0.0.1:8080/wordpress/ con el aspecto
inicial del portal estándar que habrá que personalizar.
Caso práctico 1
Fig. 2.2. Conexión inicial del portal.Fig. 2.3. Menú lateral.
75
2 Sistemas gestores de contenidos
<?php get_header(); ?>
<?php get_sidebar(); ?>
index.php
<?php get_footer(); ?>
si
de
ba
r.p
hp
3. Estructura del CMS WordPress
La estructura de WordPress tiene dos partes totalmente diferenciadas: que son el fron-
tend y el backend.
3.1. Frontend: parte pública del CMS
WordPress estructura el frontend en varias zonas o secciones. Cada una de ellas tiene
un nombre asignado y un programa en PHP que la gestiona.
En función del tipo de tema o plantilla que se utilice desde WordPress, pueden cambiar
algunas de estas zonas. En general, todos ellos disponen de: cabecera (header.php), pie
(footer.php), barra lateral (sidebar.php) y zona de contenidos (query.php).
Esta última zona puede ser gestionada por diferentes programas dependiendo de lo
que se necesite hacer. Por ejemplo, encontraremos archive.php, search.php, category.
php, archives.php.
Cuando se visita un CMS WordPress, se entra siempre en el sitio a través del index.php.
Después, en función del tema, se podrán mostrar más o menos seccionescon ubicacio-
nes configurables.
3.2. Backend: panel de administración del CMS
El backend es el panel de administración y, por lo tanto, la parte no pública del portal
accesible solo para determinados perfiles de usuario. WordPress lo llama Escritorio.
Desde la página principal del portal web WordPress
se puede conectar el administrador de dos formas:
1. Proporcionando directamente los datos de usuario/
contraseña en el formulario de conexión.
2. Seleccionando la opción Administrador del sitio
del bloque META (para este tema en concreto, que
es el tema por defecto).
En cualquiera de las dos opciones, al introducir los
datos de conexión, pasamos a ver la parte adminis-
trativa o backend http://localhost:8080/wordpress/
wp-admin/. El aspecto del Escritorio o panel de admi-
nistración es el de la Figura 2.6.
El Escritorio consta del panel lateral izquierdo con dife-
rentes opciones de configuración agrupadas en menús
y submenús y de la zona central con los ajustes bási-
cos y opciones que permiten la creación de contenido
para la web.
Fig. 2.4. Distribución de las zonas de
trabajo de WordPress.
16. Analiza la política de pri-
vacidad de WordPress y
haz un breve resumen.
17. Accede a http://royales
tudios.com/noticias/ y loca-
liza cuál es el porcentaje de
implantación de WordPress
en el mundo.
18. ¿Crees que podemos afir-
mar que en WordPress la
navegación y el acceso a
los contenidos del sitio web
es posible mediante el uso
de los menús? ¿Por qué?
19. Cuando decimos que des-
de el Escritorio de Word-
Press podemos realizar
los ajustes del sitio, ¿a qué
nos estamos refiriendo?
Actividades
Fig. 2.5. Entrada existente por defecto en WordPress.
header.php
footer.php
Fig. 2.6. Panel de control o Escritorio de WordPress.
Sistemas gestores de contenidos2
76
4. Ajustes básicos de configuración
y aspecto de WordPress
Este apartado estudia los primeros pasos en la configuración de WordPress. Siempre
que se realicen cambios en alguno de sus apartados se deberá salir pulsando Guardar
cambios. En Ajustes > Generales se puede asignar/cambiar el nombre al portal, el sub-
título, el correo electrónico de administración del sitio, el perfil de usuario por defecto,
la zona horaria, etc.
En nuestro caso, hemos asignado el nombre AulaWEB al portal y hemos introducido
pequeñas modificaciones. La Figura 2.7 muestra la configuración definida.
Veamos los diferentes apartados que se muestran en el Escritorio. Dentro de Ajustes
básicos encontramos:
• Selecciona la configuración de privacidad: permite/deniega a los buscadores que
indexen el sitio web.
• Selecciona tu zona horaria: enlaza con los Ajustes generales del CMS.
• Activa o desactiva los comentarios: permite una configuración para los comentarios,
cada entrada particular o de forma global, así como la activación de la moderación
de los comentarios.
• Rellena tu perfil: son opciones personales de configuración del perfil. Permite estable-
cer el esquema de color de la administración para el caso del usuario admin, activar
los atajos de teclado, completar datos personales, proporcionar más direcciones de
correo electrónico de contacto, así como una reseña biográfica.
Fig. 2.7. Ajustes generales: confi guración global del sitio.
Fig. 2.8. Ajustes básicos. Fig. 2.9. Ajustes de privacidad.
Plantilla WordPress o template.
Parte software del portal que
determina la estética, la dis-
posición de los módulos, etc.
Es decir, separa el contenido
(artículos) del diseño (colores,
organización de imágenes, tipos
de letra, entre otros parámetros).
Vocabulario
77
2 Sistemas gestores de contenidos
Personaliza tu sitio permite configurar detalles sobre el aspecto del portal. Este grupo
de entradas de menú enlaza con la Apariencia de la barra lateral derecha. Se puede:
• Cambiar el tema que aparece por defecto. Las opciones mostradas en la parte inferior
están relacionadas con el tema elegido. El enlace lleva a una página con dos pesta-
ñas en las que se puede seleccionar otro tema o instalar nuevos temas. Selecciona
claro u oscuro. Si nos quedamos con el tema por defecto, esta entrada permite cam-
biar el color del fondo, el color para los enlaces y la distribución del contenido en el
portal. Este punto se amplía en el Epígrafe 11.
• Seleccionar una nueva imagen para la cabecera. WordPress muestra la imagen asig-
nada por defecto, aunque deja activada la opción de carrusel de imágenes. Se
puede incluir una imagen propia que habrá que seleccionar y subir. En principio,
dejamos activado el carrusel.
• Añadir widgets. Se pueden añadir widgets a la barra lateral seleccionando, arras-
trando y soltando sobre ella. Se ha añadido el widget Calendario.
Fig. 2.10. Menú de personalización
del sitio.
Widget. Es una pequeña herra-
mienta que en determinados
temas permite incluir, modificar
y eliminar contenidos de algunas
zonas del sitio web.
SEO. Del inglés Search Engine
Optimization (optimización para
los motores de búsqueda). Es un
conjunto de técnicas y tácticas
con el objetivo de aumentar la
visibilidad de una página o sitio
web para los motores de bús-
queda, mejorando así su posi-
ción en los resultados ofrecidos.
Vocabulario
Observa la columna de la dere-
cha del Main Sidebar. En ella
se muestran todos los widgets
que hasta este momento se han
incluido. Recuerda que se ha
utilizado para este tema la barra
lateral a la derecha.
Importante
20. Teniendo en cuenta la definición anterior de SEO,
¿crees que es interesante activar esta opción de opti-
mización?
21. ¿Un usuario puede aprender WordPress sin tener cono-
cimientos de PHP ni de bases de datos?
Actividades
Si en WordPress se están utili-
zando links permanentes (per-
malinks) adaptados para que
se lean de forma fácil, se puede
definir el nombre para un mensa-
je concreto utilizando el campo
Slug (nombre para URL).
Claves y consejos
Fig. 2.12. Pantalla de widgets.
Fig. 2.11. Opciones de confi guración del tema por
defecto.
Sistemas gestores de contenidos2
78
5. Usuarios de WordPress
WordPress establece dos grandes grupos de usuarios:
1. Usuarios del administrador (backend): son usuarios que pueden acceder a la admi-
nistración del portal.
2. Usuarios del sitio (frontend): son usuarios que pueden acceder a determinadas sec-
ciones de la parte pública.
Dentro de cada grupo hay una serie de perfiles de usuarios y entre ellos hay estableci-
da una jerarquía de permisos, de forma que no todos los usuarios de un grupo pueden
hacer todo, sino que cada uno de ellos puede realizar determinadas acciones que se
van acumulando en función de los privilegios. Además, todos los usuarios del backend
pueden realizar todas las acciones de los usuarios del frontend.
Con este sistema de perfiles de usuarios y permisos se puede dar acceso al Escritorio a
cuantos usuarios se quiera y configurar exactamente sus funciones.
Cuando se trabaja con WordPress multisite existe el perfil de súper administrador, que
tiene acceso a todas las opciones de administración de dicha red de sitios.
Cada uno de los perfiles anteriores engloba uno o más niveles que delimitan la capaci-
dad de maniobra de un usuario en WordPress. Estos niveles definen lo que es accesible
o no para cada usuario.
Además de la gestión básica de perfiles de usuario que ofrece WordPress, existe un
plugin que la amplía y mejora. Se trata de Role Manager y permite personalizar los
privilegios que tendrá cada nivel de usuario dentro de WordPress.
En el menú de administración de Usuarios, al desplegar la opción Todos los usuarios, se
muestra una lista completa de los usuarios existentes en el sitio.
La administración de usuarios de
WordPress es jerárquica y los
distintos tipos de usuarios tienen
diferentes niveles de permisos den-
tro de la administración del sitio.
¿Sabías que…?
• El archivo niveles_usuarios_
wp.pdfcontiene la descripción
de los diferentes niveles asocia-
dos a los perfiles de usuario.
• El archivo role_manager.pdf des-
cribe la descarga, instalación y
uso del plugin Role Manager.
CEO
22. ¿Te parece razonable que la gestión de los usuarios del portal solo esté disponi-
ble para usuarios administradores?
23. Utilizando el gestor de usuarios, da de alta usuarios del portal de los diferentes
perfiles.
Actividades
Perfi les de Usuario Tareas permitidas
Suscriptor
(frontend)
Puede acceder a contenidos privados o solo para suscriptores. Es un perfi l ideal para webs donde se permite
el acceso a los contenidos solo a usuarios registrados, capacidad que se habilita también en el Escritorio.
En general, un usuario suscriptor tiene permisos para poder ver su información privada, modifi car sus datos, crear
y editar contenidos en forma de entradas y publicarlas solo si tiene los permisos adecuados.
Colaborador
(frontend)
Puede escribir nuevas entradas y/o noticias, así como modifi carlas.
Cualquier contenido nuevo no se publica directamente, sino que requiere la aprobación de un administrador.
Ideal para blogs con muchos colaboradores y que exigen de un nivel mínimo de calidad en las nuevas entradas.
Autor
(frontend)
Es como un colaborador, pero puede publicar directamente sus escritos.
Puede operar en el apartado Multimedia.
Editor
(frontend/backend)
Puede gestionar artículos y noticias de cualquier otro usuario.
Es casi un administrador salvo en las funciones específi cas de administración (instalaciones, modifi cación de plan-
tillas, plugins, etc.).
Administrador
(frontend/backend)
Acceso total y absoluto a toda la administración del sitio.
Recibe en su correo las notifi caciones de los eventos que suceden en el sitio (nuevos comentarios, contacto, actua-
lizaciones, etc.).
Es el encargado de las actualizaciones, instalación de plugins, cambio de plantillas y confi guración.
Tabla 2.1. Perfi les de usuarios.
Los usuarios anónimos son aque-
llos que no se registran en el por-
tal y que tienen acceso a todas
las partes que el administrador
configura como públicas.
Recuerda
79
2 Sistemas gestores de contenidos
Gestión de usuarios de Administración
Duración: 10 minutos Dificultad: baja
Objetivo: crear usuarios con diferente perfil de administrador.
Solución:
1. Menú de gestión de usuarios. Como usuario administrador acceder al menú de
Usuarios. En nuestro caso, como tenemos la instalación recién hecha, solo tene-
mos un usuario admin que es el administrador.
2. Añadir un nuevo usuario del perfil Editor. Pulsar en Añadir nuevo e introducir los
datos que se piden. Tener en cuenta que en Perfil hay que seleccionar Editor.
Para finalizar, pulsar en Añadir nuevo usuario.
3. Añadir un nuevo usuario del perfil administrador. Repetir el proceso para dar
de alta un usuario administrador, con sus datos iniciales. Le llamaremos usua-
rioAdmin.
Si accedemos de nuevo a Usuarios veremos que tenemos creados tres usuarios para
controlar el backend del portal. Cuando se conecten estos usuarios, podrán realizar
sus ajustes básicos accediendo a la opción Perfil en el panel lateral izquierdo, den-
tro del menú Usuarios.
La Figura 2.14 muestra las tres cuentas de usuarios disponibles, dos de ellos, admi-
nistradores y un tercero, editor, que dispone de ciertos privilegios.
4. Crear usuarios con perfiles autor, colaborador y suscriptor
Seguir los pasos indicados en apartados anteriores teniendo especial cuidado al
seleccionar el perfil. Recuerda también que hay que Guardar los cambios.
Caso práctico 2
5.1. Registro de usuarios
Cuando un usuario con cuenta en el portal se quiere conectar, debe acceder al formula-
rio de conexión e introducir su nombre de usuario y contraseña. La Figura 2.15 muestra
este formulario de conexión.
Al entrar, se muestra al usuario su Perfil, que puede configurar con sus opciones persona-
les y datos de contacto. Tiene también disponible su Escritorio, en el que podrá realizar
determinadas tareas en función de su perfil y privilegios.
Si el administrador necesita conocer cuántos usuarios están conectados al portal en un
momento determinado, WordPress no dispone de una herramienta nativa para ello. Hay
que instalar un plugin específico llamado wp-useronline (http://lesterchan.net/word
press/category/plugins/wp-useronline/).
Fig. 2.13. Creación de un nuevo
usuario.
• Solo el usuario administrador
puede realizar cambios de per-
fil de los usuarios registrados
en el sitio.
• Cuando se crea un nuevo usua-
rio, el sistema envía de forma
automática una notificación a
esa persona con sus datos de
conexión. Esto requiere una co-
rrecta configuración del correo.
¿Sabías que…?
Fig. 2.14. Lista de usuarios creados.
Fig. 2.15. Conexión del usuario.
Sistemas gestores de contenidos2
80
6. Organización de los contenidos
Los contenidos constituyen el elemento básico del sitio web. Su estructura y organización
determinarán el fácil acceso a ellos y, en consecuencia, la usabilidad.
En WordPress hay varios tipos de contenidos:
• Páginas.
• Post o entradas.
• Multimedia.
• Enlaces.
Las páginas son contenidos de carácter estático, de referencia, que no se actualizan
en la portada, sino que ofrecen información permanente a la que se puede acceder
mediante menús de navegación.
Las entradas o posts son contenidos de carácter dinámico, tipo noticias y temas nuevos,
que se sitúan al comienzo de la portada del sitio en orden cronológico.
Multimedia es contenido no textual, como fotografías, sonidos, vídeos, etc., incluido en las
entradas. Existe un menú de gestión en el panel de administración llamado Multimedia.
Enlaces, como su nombre indica, son listas de enlaces a otros sitios web y que se gestio-
nan desde Escritorio > Enlaces. Los enlaces se pueden organizar por categorías.
El aspecto del CMS se puede configurar de forma que, por ejemplo, quede un post fijo
en la primera posición (requiere el plugin wp-sticky http://wordpress.org/tags/wpsticky)
o en la portada del sitio siempre haya una página estática o una página de categorías
que permitan la navegación de contenidos.
Los contenidos en WordPress se organizan de forma jerárquica en categorías, subcate-
gorías e ítems, es decir: Categoría > Subcategoría > ítem.
Esta organización jerárquica implica que dentro de una categoría pueda haber una
o más subcategorías y dentro de una subcategoría pueda haber uno o más ítems de
contenido.
Cada uno de estos niveles organizativos dispone de su propio gestor en el Escritorio.
Por otra parte, están las Etiquetas, que son palabras clave relacionadas con la entrada.
Constituyen otra forma de clasificación de los contenidos que facilita las búsquedas y el
posicionamiento.
Un contenido puede encontrarse en una serie de estados posibles:
• Publicado.
• Borrador.
• Esperando revisión.
• Privado (solo para usuarios registrados).
• Protegido (con contraseña).
• Eliminado.
Para crear los contenidos, es muy importante seguir un orden correcto. La propuesta es
seguir el orden siguiente:
1. Definir y crear las categorías, ya que todo el contenido deberá ir agrupado en estos
grandes contenedores de contenido.
2. Definir y crear las subcategorías dentro de cada categoría (si hiciera falta), que
harán el papel de contenedores de contenidos de segundo nivel.
3. Crear y asociar los contenidos (entradas) a las subcategorías y categorías que corres-
pondan.
4. Definir y crear los menús correspondientes, que determinarán la forma en la que el
usuario accederá acederá los contenidos del portal.
Taxonomía. Se utiliza para clasi-
ficar contenido. Son taxonomías
las categorías y las etiquetas.
Una taxonomía consta de térmi-
nos que pueden aplicarse a los
contenidos.
«Sin categoría» es un término
dentro de la taxonomía cate-
goría.
Categoría. Es una taxonomía
jerárquica. Permite crear una
estructura jerárquica.
Etiqueta. Es una taxonomía no
jerárquica. No tiene estructura.
VocabularioDos de las características más
importantes de la publicación
web con WordPress son:
1. La automatización de la publi-
cación programando su fecha
de publicación y fecha de
caducidad.
2. La posibilidad de archivar las
páginas antiguas en un histo-
rial sin tener que borrarlas.
Importante
81
2 Sistemas gestores de contenidos
Creación de categorías y subcategorías
Duración: 5 minutos Dificultad: baja
Objetivo: crear una categoría y cuatro subcategorías para las Unidades 1, 2, 4 y 5
del módulo profesional de Aplicaciones web. Es un paso previo a la generación de
contenidos que se verá en los Casos prácticos 6 y 7.
Descripción: crear una categoría para el módulo profesional Aplicaciones web que
se llamará Aplicaciones_Web. Dentro de esta categoría, crear cuatro subcategorías
correspondientes a cuatro unidades de las que se compone el libro: U1, U2, U4 y
U5, y dentro de cada subcategoría ir asociando entradas de contenido, por ejem-
plo, con actividades o documentación adicional.
El esquema sería:
Categoría (Aplicaciones_Web) > Subcategorías (U1, U2, U4, U5) > Entradas de
contenido
Solución:
1. Creación de la categoría
Ir a Escritorio > Entradas > Categorías. Cuando se abra la ventana, introducir los
datos correspondientes a la nueva categoría: nombre (Aplicaciones_Web), no asig-
nar ninguna categoría superior y en la Descripción explicar brevemente el objetivo
de esta sección.
2. Creación de las subcategorías
Para crear una subcategoría, ir a Entradas > Categorías. El proceso es similar a
la creación de una categoría con la particularidad de que se debe asignar una
categoría superior (Aplicaciones_Web) y en la Descripción explicar brevemente el
objetivo de cada subcategoría.
Crear de esta forma la subcategoría U1.
De la misma forma, crear una nueva categoría llamada Proyecto con dos subcate-
gorías para las Unidades 3 y 6.
Caso práctico 3
Fig. 2.16. Creación de una categoría.
Fig. 2.17. Creación de las subcategorías.
24. ¿Qué representa el cam-
po Slug?
25. ¿Qué representa el cam-
po Entradas en una cate-
goría?
26. Crear las tres catego-
rías restantes (U2, U4 y
U5) relacionadas con la
categoría AWEB siguien-
do las explicaciones del
Caso práctico 3.
Actividades
• Desde Apariencia > Menús po-
demos crear un menú personali-
zado, gestionarlo e indicar qué
páginas, categorías y enlaces
personalizados van a formar
parte de este menú.
• El número de menús admitidos
por WordPress depende de la
plantilla o tema utilizado.
Importante
Sistemas gestores de contenidos2
82
Creación de un menú personalizado
Duración: 20 minutos Dificultad: media
Objetivo: crear un menú cuyos elementos estén asociados a las subcategorías defi-
nidas en el Caso práctico 3.
Solución:
1. Creación de un nuevo menú. Desde Menús ir a la pestaña en la que aparece el
signo «+». Asignar al menú el nombre AWEB, nombre del módulo correspondiente,
una breve descripción y pulsar en Crear menú. Ya tenemos el nuevo menú creado.
Para que se vea el menú creado AWEB, hay que ir a Escritorio > Apariencia >
Menús > Ubicación del Tema y elegir el Primary Menu (AWEB).
2. Asociar al menú las categorías. El paso siguiente es asociar al menú las cate-
gorías/subcategorías que se quiera. En nuestro ejemplo tenemos la categoría
Aplicaciones_Web y cuatro subcategorías. Asociamos a este menú las subcate-
gorías U1, U2, U4 y U5. El resto de unidades están relacionadas con el Proyecto
y las asociaremos a otro menú.
Caso práctico 4
7. Gestión de menús
WordPress permite la navegación y acceso a los contenidos del portal a través de menús.
Los componentes del menú son los ítems de menú o entradas de menú.
En general, en un menú se pueden incluir:
• Categorías.
• Páginas.
• Enlaces personalizados.
Algunos menús se crean en el proceso de instalación del portal, pero se pueden elabo-
rar nuevos menús personalizados y/o editar los ya existentes.
El administrador del sitio es quien puede crear menús. Cualquier otro usuario dado de
alta en el sitio no podrá hacerlo si no tiene perfil de administrador.
Es importante tener en cuenta que los menús van asociados a los temas. Es decir, un
tema o plantilla determinada soporta un número máximo de menús y solo determinados
menús. Por ejemplo, el tema que hemos seleccionado por defecto solo admite un menú
llamado Primary Menu.
Se puede acceder a la gestión de menús desde el Escritorio, con la opción Apariencia
> Menús.
Las acciones que se pueden realizar con los menús y los parámetros asociados están
descritos en el Caso práctico 4.
Fig. 2.18. Categorías existentes.
Fig. 2.19. Creación de un menú. (Continúa)
83
2 Sistemas gestores de contenidos
Para ello hay que seleccionar el menú AWEB y en la caja
de categorías, en la pestaña Ver todo, se muestran todos
los elementos disponibles de tipo categoría para asociar
a este menú AWEB. Pulsar en Añadir al menú (Fig. 2.20).
En el bloque de la derecha podemos observar, en la pes-
taña del nuevo menú AWEB, las subcategorías asociadas.
3. Publicación del menú AWEB. La visualización del nuevo
menú es inmediata para el usuario admin que la ha
creado y para el resto de usuarios que lo verían al
acceder al sitio. Aparece como una barra en la parte
inferior de la imagen de cabecera del portal.
En un menú se pueden incluir enlaces personalizados que
referencian direcciones web. Por ejemplo, se puede aña-
dir un enlace al menú creado que lleve directamente a la
web oficial de WordPress. Rellenar los campos y pulsar en
Añadir al menú. A continuación, pulsar en Guardar menú.
En la parte pública de nuestro portal ya podemos ver el
nuevo menú vacío, puesto que no se le ha añadido ningún
ítem de contenido.
4. Edición del menú
AWEB. Para editar
un menú hemos de
acceder a Aparien-
cia > Menús y, a
modo de pestañas,
vemos todos los menús disponibles. Al seleccionar el menú
que se quiere editar (AWEB), se muestran las categorías y
subcategorías asociadas y que se pueden editar/eliminar.
También son editables en ese momento las categorías y
subcategorías, enlaces y páginas.
5. Creación de submenús. Se trata de crear dos entradas de
menú dentro de los menús U1 y U2. Se llamarán Reflexio-
nes y Documentación, respectivamente. En el submenú
Reflexiones el profesor del módulo incluirá un conjunto de
indicaciones sobre la unidad, tareas que se han de rea-
lizar, plazos de entrega, etc. El submenú de Documenta-
ción pone a disposición de los alumnos todos aquellos
archivos relacionados con la unidad que sean de interés.
Para ello, creamos dos
nuevas categorías, Re-
flexiones y Documenta-
ción, que no asociamos
a ninguna superior. Ir
ahora a Menús y arras-
trar cada una de estas
categorías a la entrada
de menú a la que se
quiere asociar.
La Figura 2.23 muestra
la estructura del menú
con estas aportaciones.
6. Comprobación en
el portal. Si vamos
ahora al portal, vere-
mos el menú creado con
sus entradas de submenú
en forma de lista, como
muestra la Figura 2.24.
7. Tarea: Crear un menú Pro-
yecto. Crear una entrada
de menú llamada Pro-
yecto (asociada a la
categoría Proyecto), que
tenga como submenús entradas asociadas a las cate-
gorías U3 y U6.
Caso práctico 4
(Continuación)
Cuando se borra un menú, se
elimina tanto el menú selec-
cionado como las entradas
contenidas en él.
¿Sabías que…?
Fig. 2.20. Enlace a la web de WordPress.
Fig. 2.23. Categorías enlazadas al
menú AWEB.
Fig. 2.21. Gestión de menús.
Fig. 2.24. Opción de menú
desplegable.
Fig. 2.22. Menú AWEB en la portada del sitio.
Sistemas gestores de contenidos2
84
8. Gestión de contenidos
Existen varios tipos de contenidos, pero dos son los tipos básicos en WordPress:
• Estáticos (páginas): no requieren organización.
• Dinámicos (posts/entradas): asociados a categorías y subcategorías.
La creación y administración de contenidos estáticos o páginas se realizadesde la
opción Páginas del Escritorio. La creación y administración de contenidos dinámicos se
hace desde Entrada del Escritorio.
Los usuarios admin y editor pueden crear páginas, tanto desde el frontend como desde
el backend. Las páginas se verían en el sitio como si fueran subdominios accesibles a
través de la URL a la que se le añade al final el Slug asociado.
8.1. Páginas
El menú Páginas tiene dos opciones: Todas las páginas y Añadir nueva.
Todas las páginas permite la gestión de todas las páginas existentes. En este momento
solo existe una referencia. Cada página dispone de opciones para la Edición, Tirar a la
Papelera y Ver. Comprobamos que, para la página de ejemplo, el autor es admin, está
publicada y no tiene ningún comentario.
Si se edita dicha página, se verá su contenido y las opciones de publicación y visibili-
dad, entre otras.
Fig. 2.25. Menú de gestión
de páginas.
Fig. 2.26. Páginas existentes.
Fig. 2.27. Contenido de página de ejemplo.
Las páginas tienen como esta-
dos posibles:
• Publicada.
• Pendiente de revisión.
• Borrador.
Otra característica de las páginas
es su visibilidad, que puede ser:
• Pública.
• Protegida por contraseña.
• Privada.
Importante
Las páginas no se pueden aso-
ciar con las categorías y no se
pueden asignar etiquetas. La
estructura organizativa de las
páginas solo proviene de sus
relaciones jerárquicas (páginas
y subpáginas), y no de etiquetas
o categorías.
Las páginas no son archivos. Se
almacenan en la base de datos
al igual que los mensajes.
¿Sabías que…?
85
2 Sistemas gestores de contenidos
Creación de una página con un texto de bienvenida
Duración: 10 minutos Dificultad: media
Objetivo: crear una página, editarla para realizar cambios sobre ella y ver diferen-
tes opciones de publicación de la página.
Solución:
1. Crear una página. En el Escritorio, ir a Páginas > Añadir nueva. Asignamos
como título «Bienvenido/a al módulo de Aplicaciones web».
Introducir el título y el texto de la bienvenida. Guardar borrador y en Vista previa se
puede ver el aspecto de esta nueva página desde el frontend.
Fig. 2.28. Página de bienvenida.
2. Editar la página. Desde la Vista previa, pulsar en Editar para realizar algunos
cambios en la página.
La publicación de la página se puede programar para una hora y fecha concretas.
A la derecha de la pantalla de edición se ven los campos que lo permiten. Si se
pulsa en Publicar, se publica en ese mismo instante.
Observamos también que está como Borrador. La pasamos a estado Pendiente de
revisión y pulsamos en Aceptar. Luego pulsaremos en Guardar como pendiente.
En la opción Todas las páginas hay dos páginas, y en la creada aparece el texto
Pendiente.
Editar la página de nuevo para modificar su estado que se deja en Borrador y Publi-
cada.
La zona de edición del texto de la página tiene dos pestañas. Una, llamada Visual,
para introducir el texto tal y como se verá, y otra llamada HTML para ver el código
HTML con las diferentes etiquetas disponibles.
En la zona Atributos de la página se pueden relacionar las páginas. Es decir, se
puede indicar que una página tiene un nivel superior que será una página previa-
mente creada. Por tanto, se pueden agrupar de forma jerárquica.
Caso práctico 5
Fig. 2.29. Lista de páginas.
27. ¿Crees que, según lo
explicado hasta ahora,
podemos decir que los
menús de navegación de
WordPress enlazan cual-
quier combinación de
categorías y entradas?
28. Averigua qué plugins
de WordPress pueden
mejorar la redacción, el
diseño, la funcionalidad o
la personalización de las
entradas de WordPress.
Actividades
Fig. 2.30. Atributos de la página.
(Continúa)
Sistemas gestores de contenidos2
86
Observar que la URL de la nueva página es: http://localhost:8080/wordpress/
bienvenidoa-al-modulo-de-aplicaciones-web
3. Imagen destacada de la página. Otra opción para la página es la imagen des-
tacada, que podemos incorporarle. Simplemente hemos de arrastrar y soltar en
el recuadro la imagen que se quiera desde el propio equipo, desde una URL
determinada o desde una biblioteca multimedia.
Elegida la imagen, se muestra una ventana de edición de sus principales características.
Caso práctico 5
(Continuación)
Fig. 2.31. Establecer imagen destacada.
Fig. 2.32. Características de la imagen.
En http://ayudawordpress.com/
tu-propio-logo-en-la-cabecera-
del-escritorio/ encontrarás infor-
mación sobre cómo incluir tu
propio logo en la cabecera de
tu sitio web.
Web
29. Localiza una extensión
de Firefox que facilite la
tarea de edición de pági-
nas HTML, hojas de estilo,
etc., a los administradores
de sitios web.
30. Editar la página de bien-
venida e identificar las eti-
quetas HTML y comentar
su significado.
31. Sobre la misma página,
identificar las etiquetas
CSS y comentar su signi-
ficado.
Actividades
(Continúa)
87
2 Sistemas gestores de contenidos
Al finalizar la edición, se puede pulsar en Inser-
tar en la entrada/Usar como imagen destacada/
Borrar. Finalmente, Actualizar.
Cuando se necesite utilizar una imagen ya subida
a la página, se puede pulsar de nuevo en Estable-
cer imagen destacada y se muestra la ventana con
varias pestañas. Entre ellas está la Galería, en la
que se encuentra la imagen subida y cuyas propie-
dades podemos mostrar y editar.
También ofrece la opción de insertar toda una gale-
ría de imágenes completa en la página y configu-
rar su visualización (posición, orden, etc.).
4. Edición rápida. La edición rápida muestra en una
ventana (Fig. 2.34) el resumen de las opciones
más relevantes que se pueden modificar. Entre
ellas, está la posibilidad de asignar una contra-
seña a una página privada, que se solicitará
cuando un usuario quiera acceder a ella.
Se debe observar también que el Slug indicado es
la parte de la URL dada en el punto 2 y que refe-
rencia a dicha página. Si se realizan cambios, pul-
sar en Actualizar.
5. Edición masiva de páginas. Desde la vista Todas las páginas, se pueden selec-
cionar varias de ellas y realizar una edición masiva. Para ello, pulsamos en
el recuadro de selección de las páginas que queremos editar y, en la lista de
Acciones en lote, iremos a Editar.
La Figura 2.35 muestra la ventana de edición masiva de todas las páginas seleccio-
nadas. En esta situación se pueden realizar cambios globales en todas las páginas
que habrá que Actualizar.
Caso práctico 5
(Continuación)
Fig. 2.33. Galería de imágenes.
Fig. 2.34. Nuevo artículo para la sección News.
Fig. 2.35. Edición masiva de páginas.
Una vez que se ha escrito una
entrada, para que no se pierda
cuando esté publicada durante
unos días y ya no aparezca en la
portada, hay que categorizarla
y vincularla a una etiqueta.
Importante
Sistemas gestores de contenidos2
88
Hemos visto cómo crear contenido desde el backend. Con el Caso práctico 6 vamos a
crear contenido desde la parte pública del portal. Hay que recordar que no todos los
perfiles de usuario del frontend pueden realizar esta tarea.
Creación de una página de contenido desde el frontend
Duración: 5 minutos Dificultad: media
Objetivo: crear una página, editarla para realizar cambios en ella y ver diferentes
opciones de publicación de la página.
Solución:
1. Crear una página. El usuario admin se identifica en el sitio web. El sitio dispone
de una barra superior con varias opciones.
Una de ellas (+ Nuevo) es el acceso directo a la crea-
ción de una nueva página. Seleccionar la opción
Página.
La interfaz que se muestra es la misma que al acceder
desde el panel izquierdo de la página de administración
(http://localhost:8080/wordpress/wp-admin).
En este caso, se crea una página que se utilizará como
zona de notificaciones del módulo Aplicaciones web por
parte del profesorado.
Asignar a la página el nombre «Notificaciones» e intro-
ducir una breve descripción.
Dejar las opciones por defecto. Comprobar que la URL asignadaes http://localhost:
8080/wordpress/notificaciones y pulsar en Publicar.
2. Editar la página protegida con contraseña. Se puede proteger una página
desde Edición Rápida o desde Visibilidad > Editar > Protegida por contraseña.
En Atributos de página, indicar que su página superior es Bienvenida al módulo
web. Comprobar cómo su URL cambia a http://elvira:8080/wordpress/
bienvenida-al-modulo-web/notificaciones.
En plantilla, utilizar Sidebar template y asignar una imagen personalizada.
Pulsar en Actualizar.
La Figura 2.38 muestra el aspecto de la nueva página al ser visitada.
Esta nueva página ha sido creada por el usuario admin. Solo el usuario con perfil de
editor podría editarla también. Cualquier otro usuario solo podrá visitarla si conoce
la contraseña.
Caso práctico 6
Fig. 2.36. Opciones disponibles desde el frontend.
Fig. 2.37. Petición de contraseña en una página protegida. Fig. 2.38. Página protegida visible.
89
2 Sistemas gestores de contenidos
8.2. Entradas o posts
En el Epígrafe 6 se definió el concepto de entrada o post como contenido dinámico. Sue-
le utilizarse para publicar noticias y, por defecto, se sitúa en primer lugar de la portada
del sitio web en orden cronológico.
La gestión de entradas permite configurar cuántos posts aparecen en la portada, si
se deja uno anclado en primera posición y otras opciones que se estudian en el Caso
práctico 7.
También se puede cambiar este modo de funcionamiento y hacer que el contenido de la
portada siempre esté ocupado por una página estática o incluso una página de nave-
gación de contenidos (página de archivos o página de categorías).
Creación de una entrada/post desde el backend
Duración: 20 minutos Dificultad: media
Objetivo: crear una entrada, editarla para realizar cambios en ella y asociarla a
una categoría. Ver diferentes opciones de edición.
Solución:
1. Crear una entrada. Desde el Escritorio ir a Entradas. Las opciones disponibles
de este menú se muestran en la Figura 2.39.
Ir a Añadir nueva. El aspecto de la interfaz es muy similar al de Añadir una página,
que se vio en el Epígrafe 8.1.
La entrada se llamará «Ini-
cio de curso: tutorías» y
estará asociada a la cate-
goría Aplicaciones_Web.
Rellenamos los campos de
la siguiente forma:
• Estado: Borrador.
• Visibilidad: Pública.
• Formato: Estándar.
• Categoría: Aplicacio-
nes web.
• Etiqueta: Reflexiones.
Pulsar en Guardar Borra-
dor y Vista previa. Obser-
var el aspecto de la nueva
entrada y, si no hay nada
que cambiar, editar de
nuevo la entrada y pulsar
en Publicar.
Observar que en las entradas existe la opción de asignar a cada una de ellas una
etiqueta (tag). Como ya se dijo, las etiquetas actúan como información de metada-
tos, es decir, palabras clave que luego se utilizarán en las búsquedas para la loca-
lización de la entrada.
2. Edición rápida de la entrada. Ir de nuevo a Entradas > Todas las entradas y pul-
sar en la Edición rápida de la página creada «Inicio de curso: tutorías».
La edición permite modificar la categoría asociada, cambiar la etiqueta o asignarle
nuevas etiquetas a dicha entrada, cambiar el estado, fijar esta entrada o cambiar el
formato de la entrada, entre otras.
Caso práctico 7
Fig. 2.39. Menú Entradas del Escritorio.
Fig. 2.40. Crear una entrada.
En WordPress puedes escribir un
contenido hoy y programar su
publicación de forma automáti-
ca para otra fecha posterior.
¿Sabías que…?
Conviene categorizar las entra-
das. De esta forma, si las opcio-
nes de menú son categorías, al
acceder a ellas, se mostrarán
todas las entradas de dicha
categoría.
Importante
(Continúa)
Sistemas gestores de contenidos2
90
Ahora, modificar de forma que no se permitan los comen-
tarios y cambiar la fecha de publicación para que se
demore unos 10 minutos. Pulsar en Actualizar.
Al pie se indica la categoría a la que está asociada esta
entrada. La edición está permitida porque se está visi-
tando el sitio como usuario admin. No se admiten comen-
tarios.
Aunque se está visualizando la entrada, en realidad la
publicación no se hará hasta que llegue la fecha y hora
programadas.
3. Entrada pendiente de publicación. De nuevo editar la entrada y cambiar su
estado a Pendiente de revisión. Pulsar en Actualizar.
Ningún usuario del sitio ve esta página; no se muestra como Entrada reciente.
En la lista de todas las entradas aparece el texto Pendiente y quiere decir que, hasta
que un usuario con permisos no la publique, seguirá en dicho estado.
Un usuario editor ve la entrada como pendiente y puede cambiar su estado. Un usua-
rio colaborador o suscriptor ve que está pendiente, pero no puede cambiar su estado.
4. Filtrado de entradas. Cuando el sitio tiene gran cantidad de entradas, es nece-
sario visualizarlas siguiendo algún criterio.
En la Figura 2.42, en la parte superior están disponibles tres criterios de clasifica-
ción de las entradas.
1. Por fechas.
2. Por categoría o sin categoría.
3. Por etiquetas.
También se pueden organizar las entradas por aquellos campos de cabecera que lo
permitan (aparece un pequeño triángulo en un sentido u otro indicando si el orden
es ascendente o descendente). Por ejemplo, por título, por autor y por fecha.
Existe la opción de aplicar acciones de forma global (Acciones en lote), como la
edición y el borrado. Cuando se realizan tareas comunes a varias entradas, esto
facilita las tareas de administración.
5. Añadir una imagen. Se puede añadir una imagen a la entrada creada
siguiendo el mismo procedimiento explicado en el Caso práctico 5, apartado 3,
para las páginas.
Caso práctico 7
(Continuación)
La creación de entradas desde
el sitio web es totalmente para-
lela a la creación desde el
backend. Es una opción dentro
de + Nuevo. Solo los usua-
rios autor, colaborador, editor
y administrador pueden crear
entradas desde la parte pública
del portal.
Importante
Fig. 2.41. Nueva entrada para
Aplicaciones_Web.
Fig. 2.42. Filtrado de entradas de Aplicaciones_Web.
91
2 Sistemas gestores de contenidos
9. Gestor de la página de inicio
La página de inicio es la que los usuarios verán como entrada al sitio web y WordPress
dispone de varias opciones para ello.
9.1. Fijar página estática como página principal
WordPress permite establecer una página de forma estática como página de inicio del
sitio web. La página titulada «Bienvenido/a al módulo de Aplicaciones web» va a ser
utilizada como página principal del sitio.
Para ello, y como administrador, ir a Ajustes > Lectura (indica lo que leerán los usuarios
cuando accedan al portal) y en el apartado La página inicial mostrará seleccionar Una
página estática de las disponibles en la lista desplegable. En el apartado de Ajustes de
lectura se pueden configurar otros parámetros de funcionamiento del sitio web.
El aspecto de la página principal es ahora el que muestra la Figura 2.44 y está determi-
nado por el tema utilizado hasta este momento, que es el tema por defecto.
Observa que la URL no es la típica de una página, sino la correspondiente al inicio
(index.php) de WordPress http://localhost:8080/wordpress/. Para finalizar, se dejará
desactivada la opción de página de inicio y se volverán a ver las entradas que no estén
categorizadas. También se puede aprovechar para eliminar la entrada típica del «Hola,
mundo». En el Epígrafe 11, que trata sobre temas, se cambiará el tema del portal y se
verá de qué forma afecta a la estructura del mismo.
En Ajustes de lectura se puede
establecer el número máximo
de entradas que se mostrarán
en el sitio, el número máximo
de entradas que se mostrarán al
sindicar el sitio, si se muestra la
entrada completa o un resumen
y el sistema de codificación que
se utiliza en las entradas y pági-
nas del sitio.
Importante
Fig. 2.43. Creación de una página estática al inicio.
Fig. 2.44. Página principal del portal AulaWEB.
Sistemasgestores de contenidos2
92
10. Otros componentes de WordPress
Otros elementos no menos importantes de WordPress son los widgets y las extensiones
que tratamos a continuación.
10.1. Widgets
Widget es un programa (generalmente pequeño) o miniaplicación que se ejecuta por un
motor o Widget Engine.
El uso de widgets facilita el acceso a funciones utilizadas muy a menudo y que afectan
a la información visual del sitio. También se los conoce como gadgets de escritorio.
Son widgets: el calendario, las notas, las nubes de etiquetas, búsquedas, agendas, cal-
culadoras, información del tiempo, etc.
En WordPress, el acceso a los widgets esta en el Escritorio > Apariencia > Widgets.
La Figura 2.45 muestra la colección de widgets disponibles en relación con el tema
instalado. Añadir un widget es tan sencillo como pulsar en Añadir/Arrastrar. Al editar
dicho widget, hay que seleccionar el lugar donde estará visible la información que pro-
porciona.
En el Epígrafe 11 se verá cómo se utilizan determinados widgets asociados a los plugins
que se instalen para el tema seleccionado.
10.2. Extensiones
Las extensiones en WordPress (http://wordpress.org/extend/) son aplicaciones que le
añaden funcionalidad. Hay disponibles gran cantidad de ellas, desde tiendas virtuales,
galerías de imágenes, foros, etc., pero conviene solo instalar aquellas que realmente se
necesiten, es decir, aquellas cuya funcionalidad sea imprescindible en el portal.
Las extensiones pueden ser comerciales o gratuitas.
Dentro del grupo de extensiones, WordPress tiene:
• Temas o plantillas. Se denomina tema o plantilla a la manera en que WordPress
muestra sus componentes en el sitio web y su aspecto, permitiendo personalizar el
diseño del CMS.
• Plugins. Se define plugin como pequeño programa que permite integrar otros conteni-
dos en el cuerpo del artículo, como controles.
Es importante tener en cuenta algunos detalles respecto al uso de las extensiones. En
general:
• Si se ha instalado una extensión y se comprueba que no es útil, hay que desinstalarla.
Hay que intentar instalar solo lo que se necesite. Si se instalan componentes sin cono-
cer su función y dejan de utilizarse porque no interesan, el sistema se hace más lento
y pesado. Hay que instalar solo los que se vayan a utilizar. Por eso, es fundamental
tener siempre dos máquinas con el mismo CMS, una para explotación y la otra para
pruebas donde se realizarán las tareas de investigación, pruebas de plugins, etc. Y
solo se trasladarán los cambios a la de explotación cuando se hayan validado y no
den errores.
• Las extensiones se deben mantener actualizadas. De la misma forma que se actualiza
periódicamente el propio WordPress, también se deben actualizar las extensiones.
• Instalar solo extensiones fiables, es decir, descargadas de sitios oficiales. Se evitarán
posibles problemas.
• Las extensiones que se instalan por defecto con WordPress no hay que desinstalarlas.
Fig. 2.45. Widgets disponibles.
32. Localiza un vídeo que te
ayude a entender cómo
gestionar los widgets en
WordPress.
33. Existen varios tipos de
plugins, y por cada tipo
de plugin existe un direc-
torio dentro del directorio
plugins. Averigua cuántos
tipos tienes instalados con
tu WordPress.
34. Enumera componentes
WordPress que permitan
realizar encuestas.
Actividades
Si después de activar un widget
se necesita realizar algún cam-
bio de configuración, acceder a
la barra de la derecha en la que
se muestran los widgets activos
con la opción de Edición.
Importante
Cada componente tiene su pro-
pia tabla en la base de datos
de WordPress. Esto es lo que
proporciona su independencia
y permite que sean instalados/
desinstalados sin interferir con el
resto del portal.
Claves y consejos
93
2 Sistemas gestores de contenidos
11. Gestión de temas
WordPress utiliza una técnica que permite la separación del contenido y el diseño (pre-
sentación). De esta forma, se puede cambiar la estética del portal WordPress sin alterar
los contenidos ni la organización de los mismos. Para ello, se utilizan los temas (del
inglés themes) o plantillas. Por lo tanto, los temas determinan el aspecto y la distribución
de los contenidos del portal.
El administrador también puede descargar temas disponibles en la web de forma gra-
tuita, de pago o bien desarrollarlas. El sitio oficial de temas de WordPress es http://
wordpress.org/extend/themes/.
En realidad, un tema es un conjunto de archivos que globalmente conforman la interfaz
gráfica del sitio web o frontend.
Estos archivos son de varios tipos: imágenes (.jpg, .gif), páginas HTML (.html), código
PHP (.php), hojas de estilo (.css), etc.
En el proceso de instalación de WordPress el tema por defecto se llama Twenty Eleven,
que además deja disponible otro tema llamado Twenty Ten. Todos los cambios y configu-
raciones que se han realizado hasta este momento han sido sobre el tema Twenty Eleven.
Los temas disponibles están en Apariencia > Temas en la pestaña Administrar temas.
Cada tema tiene una serie de opciones específicas que hay que conocer, como son
menús, parámetros del tema, fondo, cabecera o widgets. Si se instala un nuevo tema,
sus opciones son diferentes.
11.1. Antes de elegir un tema...
Es importante que antes de elegir un tema tengamos claras algunas cuestiones:
• Saber cómo gestionar el menú, si es sencillo, si permite menús desplegables, etc.
• Conocer si la distribución de los contenidos de la página principal que se tiene ahora
es la que se quiere en su página de inicio.
• Saber si existen widgets listos para ese tema y si son gratuitos o de pago.
• Conocer si necesita widgets y, si es así, saber si se pueden situar en la barra lateral
con facilidad. Y, si no, seguramente se tendrá que optar por otro tema. Hay que hacer
pruebas antes.
11.2. Opciones del tema
Desde Apariencia > Temas se pueden modificar las opciones de un tema particular. La
Figura 2.46 muestra la barra de opciones para el tema por defecto junto con las etique-
tas aplicables.
Si se pulsa en Theme Options, se muestra la interfaz desde la que se configura el color
de fondo del sitio, la ubicación de los contenidos y el color de los enlaces. Después de
modificar, pulsar en Guardar cambios. Al pulsar Menús, se muestra la interfaz de admi-
nistración de menús con los datos para ese tema.
Se puede pasar de un tema a otro simplemente activando el nuevo tema. Esto hace que
se desactive el tema actual.
Fig. 2.46. Opciones disponibles para el tema.
Existen multitud y variedad de
plantillas y temas para todos
los gustos y preferencias.
En las direcciones siguientes
tienes temas disponibles para
descargar.
http://plantillaswordpress.org/.
ht tp://new wpthemes.com/
demet-free-wordpress-theme/.
WordPress dispone de un foro
para proponer soluciones sobre
los temas.
Está disponible en http://
themeid.com/forum.
Tienes disponible un artículo que
comenta las ventajas e inconve-
nientes de utilizar temas gratis en
http://ayudawordpress.com/
temas-gratis-o-de-pago/.
¿Sabías que…?
Sistemas gestores de contenidos2
94
11.3. Instalar un tema
El backend desde Apariencia > Temas dispone de una pestaña específica para la insta-
lación de temas. En ella se muestran gran cantidad de parámetros que van a servir de
filtros para localizar temas que se ajusten a nuestras necesidades o gustos.
El administrador puede seleccionar el tema marcando sus preferencias o puede acceder
a la página de temas de WordPress y seleccionarlo directamente desde allí. También se
pueden utilizar temas muy personalizados y de pago.
Fig. 2.47. Opciones para fi ltrar el tema que se va a instalar.
Instalación y configuración de un tema
Duración: 30 minutos Dificultad: media
Objetivo: instalar un nuevo tema desde http://plantillas
wordpress.org/.
Descripción: se descargará el tema, se instalará y se reali-
zará su configuración básica.Solución:
1. Descarga de un tema. En Internet existen multitud de
sitios web de los que se pueden descargar temas de
forma libre y gratuita. Para el Caso práctico, utilizare-
mos la web oficial.
En la elección de un tema, hay que tener en cuenta la
compatibilidad con la versión instalada de WordPress.
No todos los temas se pueden utilizar en todas las ver-
siones.
Acceder a la web http://plantillaswordpress.org/ y selec-
cionar el tema Fusion. Como indica la descripción, se
trata de un tema de diseño en tonos claros muy elegante
y eficaz con un conjunto muy robusto de opciones que
suele también ser utilizado como blog. La página oficial
de este tema es http://digitalnature.ro/projects/fusion.
Pulsar en Fusion plantilla gratuita para WordPress.
El archivo que contiene el tema es fusion.zip, que se
copia al directorio del usuario.
2. Instalación del tema. Instalar un tema es tan simple
como descomprimir el .zip y copiar el directorio creado
en la carpeta /home/admin/lampstack-5.3.12-0/apps/
wordpress/htdocs/wp-content/themes o extraer directa-
mente el zip de dicha carpeta. Al ir a Apariencia >
Temas aparece el nuevo tema instalado. Dispone de las
opciones de realizar una simulación (Vista previa, Fig.
2.48) y comprobar cómo quedan los contenidos exis-
tentes en el sitio en el nuevo tema, la opción de Activar
para dejar el tema usado por defecto y borrar el tema.
3. Configuración básica del tema. Hemos dejado activado
el nuevo tema (Activar Fusion) y ahora retocaremos
algunos aspectos.
Caso práctico 8
(Continúa)
95
2 Sistemas gestores de contenidos
(Continúa)
4. Opciones específicas del tema Fusion. Dependiendo del
tema, este puede disponer de un conjunto de opciones
específicas y configurables. En el caso de Fusion, al
instalar el tema, ha aparecido una nueva entrada en el
menú Apariencia llamada Fusion settings.
Permite activar un segundo sidebar (barra lateral), modi-
ficar el color de la cabecera o bien colocar una imagen
(900x200px) que determinará el administrador, añadir un
logo y permitir la navegación por páginas o categorías a
través de pestañas. Dejamos la barra lateral a la derecha.
Pulsar en Save Changes.
Existen otras pestañas con más opciones configurables.
Pero, como se indica en la página, no conviene modificar las
opciones por defecto si no se sabe lo que se está haciendo.
5. Aumento/disminución del texto. En la esquina superior
derecha aparece el botón Aa<>, que permite aumentar
o disminuir el tamaño de la letra. Puede ser muy útil.
6. Título del sitio web. Recordar que para cambiar el título
del sitio web hay que ir a los Ajustes generales.
Se puede añadir una breve descripción del sitio que apa-
rece debajo del título. En nuestro ejemplo, no hace falta
modificar el título, pero eliminamos el subtítulo.
7. Cambiar la imagen, incluida en la parte superior, por
un logo personal. Para sustituir la imagen, hay que ir al
Escritorio > Apariencia > Fusion Settings.
Activar LOGO IMAGE en YES y desde Examinar se puede
localizar el nuevo logo.
Pulsar en Subir para incluir la imagen en nuestro Word-
Press. Hay que tener en cuenta que el logo se situará por
defecto en la zona del título del sitio. Eso quiere decir que
hay que cambiar la ubicación del logo o modificar la ubi-
cación del título para que no se solapen.
Por otra parte, se debe tener en cuenta que cada tema per-
mite unos tamaños diferentes de imágenes de cabecera.
Esta restricción se puede modificar accediendo a las hojas
de estilo correspondientes. Se puede probar visitando el
sitio para comprobar el efecto, y, si nos gusta, hay que
Guardar los cambios.
8. Edición de la hoja de estilo (CSS). Ir a Apariencia > Edi-
tor y en la zona de edición está ya disponible la hoja
de estilo del tema Fusion.
Centrar el título del sitio en la zona de cabecera (header) y
aumentar el espaciado entre las letras del título.
Modificar los parámetros: top de 85 a 55px (por ejemplo);
font-size de 3.4 a 5.4; letter-spacing de -0.04 a -0.01em.
Lo dejamos de la forma:
#header h1{
font-family: “Trajan Pro”, “Lucida Sans
Unicode”, Arial, Helvetica, Sans, FreeSans,
Jamrul, Garuda, Kalimati;
font-weight: bold;
position: absolute;
color: #fff;
top: 55px;
font-size: 5.4em;
letter-spacing:-0.01em;
margin: 0;
padding: 0;
}
En la zona de la barra lateral ajustamos los espacios para
las entradas y para la barra.
Pasar de 66 % para contenido a 75 %.
Pasar de 34 % para la barra lateral a 25 %
Ajustar desde la izquierda un 75 % (estaba a 66 %).
Caso práctico 8
(Continuación)
Fig. 2.48. Vista previa del nuevo tema instalado (Fusion).
Sistemas gestores de contenidos2
96
La hoja de estilo en esa zona la dejamos así:
/* if sidebar exists... */
#page.with-sidebar #main-wrap #mid-wrap
{ right:0%; /* width of the 2nd column, 0
because it doesnt exist */ }
#page.with-sidebar #main-wrap #side-wrap {
right:66%; /* width of the main column */ }
#page.with-sidebar #main-wrap #mid {
width:75%; /* width of main column */
left:75%; /* same */
}
#page.with-sidebar #main-wrap #sidebar {
width:25%; /* width of the sidebar */
left:75%;
}
En el cuerpo (body) cambiamos el tipo de letra y aumen-
tamos su tamaño. Comprobamos que no aparece entrada
font-size ni font-family. Las añadimos, quedando así:
/* post body */
.post .postbody, .attachment .postbody{
font-family: “Tahoma”, Arial, Helvetica;
clear: left;
font-size: 14px;
display: block;
}
El nuevo aspecto del sitio es el siguiente:
Caso práctico 8
(Continuación)
Trabajar con menús en Fusion. El tema elegido no dispone de menú por defecto,
pero se puede utilizar el widget «Menús personalizados» para añadir el menú que
se creó en el Epígrafe 7 a la barra lateral del tema.
Ir a Apariencia > Widgets y localizar Menús personalizados. Pulsar en Añadir.
Abre una ventana en la que damos un título al menú y lo asociamos al menú AWEB
que tenemos definido. Observar que se puede modificar su posición (altura) dentro
de la barra lateral.
Eliminamos las entradas de submenú que creamos: Reflexiones y Documentación.
Esta acción se puede realizar desde el Editor trabajando sobre el archivo sidebar.
php (barra lateral). También se puede hacer accediendo al menú definido y elimi-
nando estas entradas. No es trivial el código afectado por esta eliminación, lo que
recomienda hacerlo directamente sobre el menú AWEB.
9. Utilización de widgets en Fusion. De la barra lateral también queremos eliminar
la entrada de categorías. Hay que tener en cuenta que mostrar las categorías
en la barra lateral es debido a que está activado el widget de categorías. Ir a
Apariencia > Widgets; localizar en la barra lateral las opciones Categorías,
Editar y Borrar.
Añadir el widget Calendario y Nube de etiquetas en el pie del sitio. Eliminar la
página de ejemplo en el menú Escritorio > Páginas.
Modificar el título de la página de bienvenida y eliminar la opción de añadir
comentarios en esta página. Redimensionar (criterio personal) la barra lateral según
las instrucciones del punto 8.
Fig. 2.49. Aspecto del sitio AulaWEB.
Fig. 2.50. Menú personalizado.
Fig. 2.51. Ubicación del widget
Calendario.
97
2 Sistemas gestores de contenidos
12. Gestión de plugins
En el Epígrafe 11 se ha explicado cómo la utilización de los temas permite personalizar
el diseño y el aspecto del sitio web. Los plugins de WordPress permiten personalizar y
ampliar la funcionalidad de todo el sitio para adaptarlo a las necesidades del usuario.
Un plugin es un conjunto de archivos que se instalan en el sitio y que amplían la fun-
cionalidad más allá de la que se obtiene mediante la instalación básica de WordPress.
En el proceso de instalación se instalan algunos plugins básicos que se pueden ver en el
Escritorio en la pestaña Plugins > Plugins instalados.
De ellos se comenta Akismet por su importancia, pero hay otros plugins por defecto muy
interesantes y cuya activación conviene considerar.
Akismet controla el posible spam que puedallegar al sitio a través de los comentarios.
Es importante tenerlo activado (por defecto no lo está). Para activar Akismet, además
de seleccionarlo y pulsar en Activar, hay que obtener en http://akismet.com/get una API
key para firmarlo.
Existe una opción gratuita para sitios personales. La clave es enviada a la dirección de
correo electrónico suministrada. Terminado el proceso, al volver a nuestro sitio, compro-
bamos que todo ha ido bien. En ese momento, se nos pide la clave.
API key. Es un código generado
por los sitios web que permite
a los usuarios acceder a su
interfaz de programación de
aplicaciones.
Se utiliza para realizar un segui-
miento de la API con el fin de
controlar el uso del servicio.
En general, actúa como iden-
tificador único para la autenti-
cación, y proporciona ciertos
derechos de acceso a la API
asociada a ella.
Vocabulario
Fig. 2.52. Confi guración de Akismet.
Sistemas gestores de contenidos2
98
Marcar las opciones que se necesiten y pulsar en Actualizar opciones. También permi-
te comprobar la conectividad de la red y así conocer si el acceso a los servidores de
Akismet es correcto.
En este momento podemos verificar que el sistema nos avisa de la existencia de una
actualización (Fig. 2.53) y nos ofrece programar la actualización automática. Esta es
una ventaja de los plugins, que avisan de nuevas versiones y permiten la actualización
directa (Fig. 2.54).
12.1. Añadir plugins
La comunidad de desarrolladores de WordPress es muy amplia y continuamente están
apareciendo nuevos plugins. El repositorio oficial de plugins es http://wordpress.org/
extend/plugins. Es conveniente, a la hora de añadir plugins, ir a sitios de confianza que
garanticen un control de calidad sobre ellos.
No todos los plugins se han desarrollado de igual forma. Por ese motivo, es importante
leer cuidadosamente las instrucciones de instalación por si se ha añadido algún detalle
que se deba tener en cuenta.
Es posible que al descargar un plugin nos avise de que la versión de WordPress no so-
porta la versión de plugin a descargar (e incluso el propio plugin). Pero no es definitivo.
En ese caso se debe ir con cuidado y probar antes de poner en producción.
El Caso práctico 9 muestra cómo descargar un plugin a nuestro sitio, activarlo y utilizar-
lo. Seleccionaremos el plugin multiidioma.
Fig. 2.53. Aviso de actualización del plugin.
Fig. 2.54. Actualización del plugin Akismet.
Puedes conocer las estadísticas
de las personas que han visitado
tu sitio web utilizando plugins.
Por ejemplo, el plugin PopStats
tiene esta función, y a diferencia
de otras opciones, como Google
Analytics o StatCounter, el plu-
gin guarda los datos en la base
de datos de WordPress.
¿Sabías que…?
35. Configura el componente
WordPress WP-Polls que
permite realizar encuestas.
Actividades
99
2 Sistemas gestores de contenidos
Instalación del plugin multiidioma
Duración: 20 minutos Dificultad: media
Objetivo: descargar, instalar y utilizar el plugin multiidioma
en el sitio web AulaWEB.
Solución:
1. Descripción del plugin qTranslate. Permite mostrar el
sitio completo en varios idiomas y los visitantes pueden
escoger el idioma que prefieran. Actúa sobre las entra-
das, las páginas, las etiquetas y las categorías.
En principio, viene definido para inglés, alemán y chino,
pero se pueden quitar y añadir idiomas según las necesida-
des. Lo que no hace es traducir las entradas.
Es capaz de detectar las preferencias de idioma a partir
de las preferencias del navegador web y de las cookies.
Además, no toca el esquema de base de datos de Word-
Press.
2. Descarga e instalación del plugin qTranslate. Estando en
http://wordpress.org/extend/plugins/qtranslate/, pulsar
en Download y guardar el .zip en una carpeta.
Descomprimir el .zip y copiar la carpeta creada en wp-
content/plugins/. En una instalación Ubuntu el camino com-
pleto es:
~/lampstack-5.3.14-0/apps/wordpress/htdocs/wp-content/
plugins
Ir al Escritorio y en Plugins > Plugins instalados vemos que
aparece el nuevo plugin que ahora activamos.
Por último, Activar (al pie de la página) los cambios hechos
en la página de plugins.
Caso práctico 9
(Continúa)
Fig. 2.55. Plugin qTranslate activado.
Fig. 2.56. Administración del plugin qTranslate. Fig. 2.57. Widget selector de idioma.
3. Opciones del plugin qTranslate. Estando en la página de plugins, en la zona de
descripción del propio plugin, pulsar en Configuración (Settings).
Activar (Enable) el español, dejarlo por defecto y deshabilitar alemán y chino. Úni-
camente aparecerán los idiomas español e inglés.
Dejar activada la opción Detectar el Idioma del Navegador Web para que, cuando
se visita la página principal a través de un marcador, el visitante sea remitido a la
dirección URL correcta para el idioma especificado por su navegador.
Si se añade un nuevo idioma que no está en la lista, habrá que facilitar los datos del
mismo (código, nombre…) y pulsar en Añadir lenguaje.
Existen opciones avanzadas de configuración y posibilidad de activar los servicios
del plugin. Entre estas opciones está la actualización automática de la base de
datos de Gettext, así como la opción de cambiar la bandera asociada al idioma,
restaurar las opciones por defecto de qTranslate, etc.
Gettext. Es la biblioteca de inter-
nacionalización y localización
GNU (i18n). Suele ser utilizada
en programas con soporte mul-
tilingüe.
Vocabulario
Sistemas gestores de contenidos2
100
Por último, existe la opción de activar los servicios de traducción en línea de qTrans-
late. Para ello, entrar en Configuración de servicios de qTranslate y activar esta
opción. Pulsar en Guardar cambios.
4. Activación del widget qTranslate. Para visualizar el selector de idioma, se ha
de activar el widget asociado al plugin qTranslate. Ir a Widgets y localizar el
correspondiente a qTranslate. Pulsar en Activar.
A continuación, se muestra la pantalla de configuración del widget en la que pode-
mos decidir dónde se visualizará el selector de idioma, le asignamos un título y lo
mostrará en el sitio. La Figura 2.59 muestra la interfaz de configuración.
5. Creación de una nueva entrada. Creamos una entrada para comprobar el fun-
cionamiento del plugin qTranslate. En el editor aparecen dos pestañas, una para
castellano y otra para inglés, que es donde escribiremos la traducción. Hay dos
campos para el título, uno por idioma.
Después de introducir el texto y asociar la entrada a una categoría o página y a la
etiqueta «Pruebas», pulsar en Publicar. El sitio web ahora tiene este aspecto (Fig. 2.60).
Si se pulsa en English, mostrará la única entrada generada también en inglés.
Vemos que el cambio de idioma ha quedado demasiado abajo en la barra lateral.
Cambiamos su ubicación modificando el valor de posicionamiento asignado.
Para ello, ir a Apariencia > Widgets > Default Sidebar, selec-
cionar la caja de qTranslate y arrastrarla hasta la posición que
se desee.
6. Traducción de contenido. A partir de ahora, cuando se cree
una nueva entrada, o editando las ya creadas, se podrá
realizar la traducción a los idiomas configurados. Habrá
que ir traduciendo al inglés progresivamente las entradas
previamente creadas y, desde ese momento, publicar para
cada artículo ambas versiones, la original (supuestamente
en español) y la traducción al inglés. qTranslate dispone
de servicios de traducción en línea, pero no funcionan en
todos los sistemas operativos y versiones. El texto se tra-
duce detectando de forma automática el idioma.
Caso práctico 9
(Continuación)
A menudo, se presentan proble-
mas de cambio de permisos en
los archivos que componen la
plantilla.
Si se sube la plantilla vía FTP
y se selecciona vía Gestor
de plantillas, el administrador
podrá disponer de permisos de
escritura sobre archivos e imá-
genes que no tendrá si lo hace
como extensión.
Claves y consejos
Fig.2.58. Creación de una entrada multiidioma.
Fig. 2.59. Opciones del widget
qTranslate.
Fig. 2.60. Mostrando el widget y la entrada multiidioma.
101
2 Sistemas gestores de contenidos
Instalación del plugin Captcha
Duración estimada: 20 minutos Dificultad: media
Objetivo: descargar, instalar y utilizar el plugin Captcha en el sitio web AulaWEB.
Solución:
1. Descripción del plugin Captcha. Captcha (Completely Automated Public Turing
test to tell Computers and Humans Apart, Prueba de Turing pública y automá-
tica para diferenciar máquinas y humanos) es una prueba para determinar
cuándo el acceso lo realiza una persona o un spam-bot. Consta de una serie
de caracteres distorsionados con un fondo que impide a los spam-bot su reco-
nocimiento.
2. Instalación y configuración. Ir a Apariencia > Plugins > Añadir nuevo y en
Buscar escribir la palabra «captcha». Localiza el plugin y lo muestra para
instalar.
Pulsar en Instalar ahora. Pide confirmación y comienza la descarga del plugin. Pul-
sar en Activar el plugin y pasar a la Configuración, donde dejamos las opciones
por defecto.
Este plugin no tiene widget asociado, ya que se visualiza en el inicio de sesión de
usuario, pero dispone de una entrada en la barra lateral dentro de BWS Plugins.
Esta entrada permite establecer la operación que se debe realizar al registrarse el
usuario en el portal.
3. Uso de Captcha. Cuando un usuario registrado
accede al sitio, al conectarse le pedirá que
resuelva el captcha (Fig. 2.62). Simplemente hay
que introducir la solución a la cuestión propuesta
y entrar. El uso de este tipo de plugins es muy
útil para evitar la inclusión de comentarios a las
entradas que, en realidad, son spam.
4. Otros plugins similares. WP-Hashcash Extended
es un captcha disponible en WordPress, que fun-
ciona de forma inversa, ya que, en vez de reali-
zar al usuario un test de reconocimiento de carac-
teres, pregunta al navegador si realmente es un
navegador manejado por una persona y no un
spam-bot. El servidor genera una clave que solo
puede ser decodificada por un navegador con
JavaScript. Esta es enviada de forma oculta en el
formulario del comentario y chequeada en el ser-
vidor. Si no coincide, se rechaza el comentario.
Fig. 2.61. Plugin Captcha.
Fig. 2.63. Opciones del plugin Captcha.
Caso práctico 10
Spam-bot. Son robots (bots)
automáticos utilizados para
incluir spam en portales, blogs,
wikis, etc.
Trackback. Es uno de los tres
tipos de linkbacks y una forma
de notificar a un sitio web cuán-
do se publica una entrada que
le referencia.
Pingback. Es un sistema auto-
mático de referencias cruzadas
entre blogs. Cuando se hace un
comentario en un blog sobre un
tema publicado en otro blog,
Pingback se utiliza para per-
mitir que el blog enlace con el
comentario en su blog.
Vocabulario
Fig. 2.62. Mostrando Captcha.
Sistemas gestores de contenidos2
102
13. Sindicación
En general, la sindicación de contenidos permite que los visitantes del portal se suscri-
ban a las noticias que consideren de interés.
WordPress admite las especificaciones RSS 1.0 (RDF), RSS 2.0 y ATOM. Cada página
tiene un feed asociado al que los lectores pueden suscribirse. Hay un feed para los
últimos mensajes publicados, por categorías, comentarios, etc. Al admitir RSS 2.0 con
marcas para archivos, permite agregar archivos MP3 (tipo podcast) de forma sencilla.
Un «feed» se define como un paquete que contiene información para ser distribuida de
forma sencilla. Por ejemplo, muchos sitios web ofrecen un feed con un resumen de las
últimas noticias publicadas.
Estos feeds pueden ser distribuidos haciendo uso de tecnologías como RSS o Atom,
ambas basadas en XML y admitidas por WordPress.
Sindicar es el proceso que permite a los usuarios acceder al contenido de los feeds. Pero
no lo hacen directamente, sino que utilizan los llamados lectores de feeds o agregadores.
En el caso de WordPress, no hace falta instalar agregadores. Tiene un mecanismo muy
sencillo para mantener y organizar la lista de suscripciones a RSS de la misma forma
que lo hacen los agregadores. Consiste, simplemente, en añadir /feed al final de la
URL del sitio web. En nuestro caso sería http://localhost:8080/wordpress/feed. De esta
forma permitimos a los visitantes que nos sindiquen.
Por otra parte, WordPress dispone de un widget RSS que se puede añadir a la zona que
se desee y en su configuración se establece a quién queremos sindicar, es decir, de qué
URL queremos tener noticias en nuestro sitio y cuántas noticias se van a ver.
Activación del widget RSS como cliente
Duración: 5 minutos Dificultad: media
Objetivo: activar el widget RSS disponible para la sindi-
cación de noticias externas en nuestro sitio. Actúa como
cliente de sindicación.
Solución:
1. Selección del widget
Ir a Apariencia > Widget y localizar RSS.
A la derecha se muestra la estructura de WordPress y los
componentes que pueden alojar al widget.
Seleccionar el widget y pulsar en Añadir. Se abre la inter-
faz de configuración del widget.
2. Configuración del widget
Introducir la URL que se ha de sindicar. Por ejemplo, el por-
tal del Ministerio de Educación http://www.educacion.gob.
es/ y una noticia que se quiera visualizar.
Se ha seleccionado la zona del pie del sitio (Footer) para
mostrarlo.
Existe un nuevo sistema de sindicación RSS en WordPress lla-
mado RSS Cloud. Este plugin (http://wordpress.org/extend/
plugins/rsscloud/) tiene la propiedad de notificar las actuali-
zaciones que se hacen en el sitio de forma instantánea.
Caso práctico 11
Fig. 2.64. Parámetros de sindicación.
Fig. 2.65. Widget de sindicación.
36. ¿Qué ventajas ofrece la
sindicación de conteni-
dos? Describe algunas de
ellas.
Actividades
103
2 Sistemas gestores de contenidos
14. WordPress como blog
Blog o bitácora es un diario o página virtual expuesta en Internet, de fácil creación, uso
y actualización. Administrar un blog es tan sencillo como usar el correo electrónico.
El blog puede ser público o privado, permitir comentarios a los contenidos que publica
el autor o no. El usuario decide las características de su blog.
Lo más significativo de un blog es que para utilizarlo no se requieren grandes conoci-
mientos informáticos. Lo único que se necesita es tener inquietud por transmitir o expre-
sar algo y práctica para hacerlo. Y WordPress, como ya se ha visto, proporciona estas
facilidades, tanto como CMS completo como blog.
Cualquier usuario que desee disponer de un blog en WordPress puede acceder a http://
es.wordpress.com y solicitar alojamiento gratuito.
Los pasos que se deben dar para hacer un blog en un hosting son los siguientes:
1. Comprar el hosting (hacerlo con criterios SEO), es decir, tener en cuenta lo que prima
o penaliza Google a la hora de abrir un sitio web. Por ejemplo, Google prima posi-
tivamente que, si la web está enfocada a España, tenga el servidor en España (IPs,
velocidades, etc.).
2. Comprar un dominio (se puede hacer aparte o a través del mismo servicio de hosting).
3. Asignar las DNS al dominio del servidor.
4. Cuando ya se está en la carpeta propia del servidor, subir los archivos descomprimi-
dos de WP.
5. En la barra de navegación, ejecutar el instalador.
Activación del widget RSS como servidor
Duración: 5 minutos Dificultad: media
Objetivo: activar el servicio de sindicación de nuestro sitio
web para que otros sitios obtengan nuestras noticias. Actúa
como servidor de feed.
Solución:
Acceder a la lista de suscripciones de nuestro sitio
Método 1
El usuario que visita nuestro sitio o blog debe ir a http://
localhost:8080/wordpress/feed y en la ventana mostrada
seleccionar el canal al que le interese suscribirse.
Fig. 2.66. Acción de sindicar.
En nuestro caso, muestra el nombre de nuestro sitio, AulaWEB.
Los visitantes del portal pueden optar por suscribirse a
nuestro canal de noticias utilizando marcadores dinámicoso mediante aplicación.
El usuario puede elegir entre colocar esta suscripción
en: la Barra de herramientas de marcadores, el menú
Marcadores, los Marcadores sin clasificar o elegir una
carpeta.
Si dejamos Barra de herramientas de marcadores, se creará
en la barra de herramientas de marcadores del navegador
una nueva entrada con el nombre que le hayamos asignado.
Seleccionamos Menú marcadores, y, al pulsar Suscribirse
en el navegador web en Marcadores, se ha añadido una
entrada llamada AulaWEB.
Accediendo a esta entrada del menú Marcadores, el usua-
rio accederá a nuestro sitio web.
Método 2
Hay que tener en cuenta que la visualización del acceso a
la sindicación dependerá de la distribución que haga cada
plantilla de las zonas del portal.
En nuestro caso, y con el tema instalado, aparecen dos entra-
das relacionadas con la sindicación que muestra la Figura 2.67.
Fig. 2.67. Entradas RSS.
Al pulsar en RSS de las entradas, se estarían sindicando
las entradas de nuestro sitio y se vuelve a mostrar la misma
ventana de la Figura 2.66. Se puede seguir el mismo proce-
dimiento. Al pulsar en RSS de los comentarios, se estarían
sindicando los comentarios de nuestro sitio.
Caso práctico 12
Blogosfera. Es el conjunto de
millones de blogs publicados en
Internet que abarcan todas las
esferas de la vida: economía,
política, arte, ciencia, tecnolo-
gía, sanidad, educación... Detrás
de cada blog hay una persona o
grupo de personas con inquietu-
des que desean compartir con el
resto de internautas.
Vocabulario
En http://ayudawordpress.com/
videotutorial-crear-un-blog-
en-wordpresscom/, hay dis-
ponible un vídeo-tutorial que
explica cómo crear un blog en
WordPress.com.
Web
Sistemas gestores de contenidos2
104
15. Copia y restauración del portal
Una de las tareas de administración más importantes es realizar copias de seguridad
del portal. Es posible que, ante alguna circunstancia imprevisible, se tenga que realizar
la restauración de dicha copia para así poder recuperar toda la información almacena-
da en el portal.
Un sitio web realizado con WordPress consta de:
1. Núcleo de la instalación de WordPress.
2. Plugins.
3. Temas.
4. Imágenes y archivos.
5. Javascripts, scripts en PHP y otros archivos de código.
6. Archivos adicionales y páginas web estáticas.
Realizar una copia de seguridad completa del sitio consiste en copiar la base de datos
de Word Press y los archivos. La base de datos contiene las entradas y otros datos que
se han ido generando con el tiempo, pero no alberga los elementos que configuran el
aspecto del sitio.
Para realizar la copia de la base de datos, utilizamos la herramienta phpMyAdmin ins-
talada junto con el paquete bitnami LAMP.
Acceder a la herramienta bien directamente (http://localhost:8080/phpmyadmin/) si te-
nemos el gestor de contenidos instalado en local o bien a través del cPanel si se trata de
un blog o un sitio alojado en un servidor externo.
Entrar como root con la contraseña asignada en el proceso de instalación de la pila
bitnami.
Buscar la base de datos de WordPress y seleccionar todas las tablas. Ir a la lista despe-
gable y seleccionar la opción Exportar.
El método de exportación puede ser rápido o personalizado, dependiendo de las opcio-
nes que se quieran configurar. Al seleccionar Personalizado, se despliegan más abajo
todas las opciones disponibles.
Fig. 2.68. Conexión a phpMyAdmin.
Fig. 2.69. Tablas de WordPress.
105
2 Sistemas gestores de contenidos
En Tablas, pulsar en Seleccionar todo. Dejar activada la opción Guardar salida a un
archivo. Dejar como formato SQL, volcado de tabla de estructura y datos, y, en las op-
ciones de creación de objetos, mantener las opciones que indica la Figura 2.71.
Pulsar en Continuar. Aparece la ventana de descarga de la tabla generada
(Fig. 2.72). La guardamos (o abrimos si tenemos curiosidad por ver su con-
tenido) en una carpeta exclusiva para almacenar copias de seguridad de
la base de datos de WordPress. Conviene añadir al nombre de la tabla la
fecha del día en que se realiza la copia.
La fase complementaria a la exportación de la base de datos será la impor-
tación para restaurar la copia de seguridad.
Para ello, ir de nuevo a phpMyAdmin. Seleccionar la base de datos genera-
da con la exportación. Ir a la pestaña Importar. Localizar el archivo genera-
do en la exportación anterior y seleccionarlo.
Fig. 2.70. Exportación de las tablas de WordPress.
Fig. 2.71. Opciones de creación de objetos.
Fig. 2.72. Copia de seguridad de WordPress.
Sistemas gestores de contenidos2
106
Copia y restauración de WordPress con Updraft
Duración: 5 minutos Dificultad: media
Objetivo: instalar, configurar y activar el plugin Updraft para la realización de copias de seguridad y su restaura-
ción.
Solución
1. Localizar e instalar el plugin Updraft. En el escritorio ir a Plugins > Añadir nuevo.
Indicar el nombre «updraft» para la búsqueda del plugin.
Pulsar en Instalar ahora. Una vez instalado, Activar el plugin, comprobamos que
no dispone de interfaz de configuración y que no se ha instalado ningún widget
asociado. Sin embargo, en Ajustes ha aparecido una nueva entrada para este
plugin.
2. Utilización de Updraft. La pantalla de Ajustes para Updraft es la que permite
realizar las copias de seguridad.
Caso práctico 13
Dejar las opciones por defecto y pulsar en Continuar. Termina la importación y comuni-
ca la ejecución con éxito.
Además de este procedimiento, en WordPress se puede utilizar un plugin que permite
realizar la copia y su restauración de forma muy sencilla. El plugin es Updraft.
Fig. 2.73. Importación de la copia de seguridad de WordPress.
Fig. 2.75. Entrada de Updraft.
(Continúa)
Fig. 2.74. Instalación de Updraft.
107
2 Sistemas gestores de contenidos
Fig. 2.77. Fase de restauración.
La Figura 2.76 muestra las opciones disponibles para definir la copia. Aparece la
fecha y hora del sistema, la carpeta en la que se almacenará, la opción de enviar
un correo electrónico cuando haya terminado, entre otras.
Como se puede observar, todavía no se ha realizado ninguna copia de seguridad.
Pulsar en Save changes y Backup Now!
Comprobamos que en el directorio indicado (~/lampstack-5.3.12-0/apps/wordpress/
htdocs/wp-content/updraft) han aparecido las siguientes referencias:
backup_2012-06-11-2115_AulaWEB_2b689788dd20-db.gz
backup_2012-06-11-2115_AulaWEB_2b689788dd20-plugins.zip
backup_2012-06-11-2115_AulaWEB_2b689788dd20-themes.zip
backup_2012-06-11-2115_AulaWEB_2b689788dd20-uploads.zip
index.html
3. Restauración de la copia de seguridad
Volvemos a la interfaz de Updraft y ahora pulsamos en Restore. Muestra una lista
desplegable desde la que seleccionamos la copia que debemos restaurar y pulsa-
mos en Restore Now!
Comienza la restauración y la Figura 2.77 muestra la secuencia de mensajes
enviados.
Caso práctico 13
(Continuación)
Fig. 2.76. Copia de seguridad con Updraft.
Sistemas gestores de contenidos2
108
16. Actualización de WordPress
La actualización del portal es una de las tareas críticas que requieren una atención
especial por parte del administrador. Conviene tener el portal siempre actualizado a su
última versión, al menos en cuanto a actualizaciones de seguridad se refiere. De esta
forma, además de incorporar las últimas novedades, se protegerá el portal de cualquier
agujero detectado y solucionado por la comunidad WordPress.
Lo primero que se ha de conocer es la versión actual de que se dispone. Para ello, ir al
Escritorio > Actualizar. Avisa de si existe alguna versión posterior.
En nuestro caso, indica que está instalada la última versión en castellano.
Observar que también avisa de actualizaciones de plugins y nos da la opción de actua-
lizarlos todos o seleccionar los que interesen.
Si lo que se quiere es hacer una actualización manual de un sitio web, los pasos que se
deben seguir son los siguientes:
• Realizar una copia de seguridad de los datos dela carpeta /wp-content.
• Realizar una copia de seguridad de la base de datos con phpMyAdmin o Updraft.
• Desactivar los plugins habilitados.
• Descargar la última versión de WordPress en español.
• Descomprimir en local y eliminar la carpeta /wp-content; utilizar nuestra copia de
esta carpeta.
• Acceder desde el navegador web a www.nombredominio/wp-admin/upgrade.php.
• Actualizar.
• Volver a conectarse y activar de nuevo los plugins.
• Comprobar que todo es correcto.
En el caso de tratarse de un blog, hay que volver a comprimir la versión descargada de
WordPress añadiendo nuestra carpeta wp-content.
Luego, habrá que subir el archivo .zip a la carpeta que contenga nuestro blog y des-
comprimirlo en ella.
Acceder desde el navegador web a www.nombredominio/wp-admin/upgrade.php y
continuar como en el proceso anterior.
Otra opción de actualización se llevaría a cabo con el plugin WordPress Automatic
Upgrade (http://ayudawordpress.com/actualizar-wordpress-con-un-plugin/).
Backlinks. Enlaces externos que
recibe una web desde otras
páginas. El número de backlinks
determina la cantidad de pági-
nas que la enlazan a través de
un vínculo.
Este número es importante para
el posicionamiento en buscado-
res. Una web es más popular
cuantos más enlaces entrantes
tenga.
Vocabulario
Antes de actualizar el CMS, es
conveniente realizar una copia
de seguridad del mismo.
Importante
Fig. 2.78. Información de la actualización. Nueva versión.
109
2 Sistemas gestores de contenidos
17. SEO y seguridad en Wordpress
SEO (del inglés Search Engine Optimization, optimización para los motores de bús-
queda) es un conjunto de técnicas y tácticas que tienen como objetivo aumentar la
visibilidad de una página o sitio web para los motores de búsqueda, mejorando así su
posición en los resultados ofrecidos.
Esta mejora en la posición está relacionada con el número de visitas, imágenes inclui-
das, vídeos, uso de palabras clave en los contenidos, etc.
Dentro de las estrategias de posicionamiento está, en primer lugar, la búsqueda de pa-
labras clave relacionadas con los servicios ofrecidos en el sitio.
A continuación, se deberían instalar ciertos plugins de WordPress que ayudaran a opti-
mizar el sitio web y, en consecuencia, su posicionamiento.
Los plugins más significativos son:
• All in One Seo Pack: permite optimizar todas las páginas para los motores de búsque-
da, pero requiere rellenar los campos de cada página o entrada del sitio.
• Simple Google Sitemap XML: genera automáticamente una página sitemap.xml don-
de se indican las páginas del sitio web que son más importantes y que se pueden
enviar a Google en las herramientas del webmaster para decirle que las indexe.
• WordPress Gzip Compression: es un plugin con el que se gana velocidad de respuesta
y descarga del sitio web. Este detalle es muy importante para el posicionamiento y
para los visitantes del sitio.
17.1. Recomendaciones de seguridad
Algunas normas básicas que contribuirán a la seguridad del sitio son las siguientes:
• Mantener el sitio actualizado con versiones que no tengan bugs de seguridad. Mejor
si son versiones estables.
• Utilizar contraseñas seguras, como combinación de letras, dígitos y caracteres espe-
ciales permitidos.
• Intentar no utilizar el nombre admin como administrador. Cambiar el nombre.
• Eliminar todo aquello que se instaló en un momento determinado, pero que ya no se
utiliza, como temas, plugins, etc.
• Utilizar en el archivo robots.txt la sentencia Disallow: / wp-* para impedir que
los robots escaneen los archivos.
• Modificar los permisos del archivo config.php a 640 (lectura y escritura para el dueño
del archivo, lectura para el grupo y nada para el resto de usuarios).
• No utilizar temas o plugins manipulados, ya que pueden llevar código malicioso o
abrir puertas traseras a potenciales atacantes.
• Realizar con frecuencia una copia de seguridad del sitio WordPress utilizando los plu-
gins adecuados o contratando un servicio de hosting que realice backups periódicos
del servidor donde está alojado el sitio.
• Utilizar conexiones seguras en las páginas de administración.
• Los permisos sobre las carpetas y archivos deben ser de solo lectura.
• Cambiar el usuario admin, ya que, al ser conocido un posible intruso, tiene ya la mi-
tad del camino recorrido, ahora solo necesitará adivinar la contraseña.
• No mostrar la versión de Wordpress. Esto puede realizarse añadiendo lo siguiente en
el archivo functions.php:
function hide _ vp _ vers()
{ return “; }
add _ filter(‘the _ generator’,’hide _ vp _ vers’);
37. ¿Cómo protegerías tu sitio
web WordPress?
Actividades
Metadatos. Información sobre
los datos del sitio web. Es impor-
tante definirlos para que los
motores de búsqueda puedan
localizar el portal.
SEO. Proceso de optimización
de un sitio que consiste en apli-
car diversas técnicas para que
los buscadores de Internet sitúen
el portal basado en WordPress
en las primeras posiciones den-
tro de sus páginas de resultados
en función de términos y frases
clave.
Vocabulario
En http://www.adseok.com/seo-
para-wordpress/ tienes disponi-
ble abundante información con
sugerencias y trucos para hacer
más visible tu sitio web.
Web
Si el sitio web o blog no es
nuevo, no conviene cambiar la
estructura de los permalinks.
Solo es recomendable para
sitios nuevos.
Importante
Sistemas gestores de contenidos2
110
Síntesis
CMS -
WordPress
Elementos en cuanto al aspecto y/o funcionalidad
Plantillas o temas.
Extensiones: plugins.
WordPress:
definición y
características
Es un CMS dinámico que permite la creación de sitios web para la publicación de noticias, difusión de información,
portales corporativos, sitios web para comercio electrónico, etc.
• Gestión completa vía web de forma sencilla.
• Organización de los artículos (entradas, post) y páginas estáticas del sitio web mediante categorías,
subcategorías y etiquetas.
• Creación y edición de contenidos utilizando un editor WYSIWYG.
• Disponibilidad de gran variedad de plantillas o temas (themes) descargables.
• Utilización de widgets y plugins que amplían la funcionalidad del sitio.
• Servidor de sindicación de noticias por RDF (RSS 1.0), RSS 2.0 y Atom.
• Permite insertar publicidad en el sitio.
• Permite la publicación mediante e-mail.
• Permite la búsqueda integrada Google.
• A partir de la versión 3, es multisite (permite configurar múltiples sitios).
Estructura URL Permalink. Es un enlace permanente. Utilizado en sitios web, gestores de contenidos o blogs para asignar una URL permanente a cada entrada del sitio y así luego poder referenciarla.
Usuarios de
WordPress
1. Usuarios del administrador (backend): pueden acceder a la administración del portal.
2. Usuarios del sitio (frontend): pueden acceder a determinadas secciones de la parte pública.
Extensiones
Son aplicaciones que añaden funcionalidad. Conviene instalar aquellas imprescindibles para el portal.
Temas o plantillas: son la manera en que WordPress muestra sus componentes en el sitio web y su aspecto,
permitiendo personalizar el diseño del CMS.
Plugin: pequeño programa que permite integrar otros contenidos en el cuerpo del artículo, como controles.
Sindicación Permite que los visitantes del portal se suscriban a las noticias que consideren de interés. WordPress mantiene y organiza la lista de suscripciones a RSS de la misma forma que lo hacen los agregadores.
Estructura de
WordPress
Frontend: parte pública
del CMS.
Organizado en zonas o secciones. Cada una de ellas tiene un nombre asignado y un
programa en PHP que la gestiona.
Backend: panel de
administración del CMS.
Parte no pública del portal accesible solo para determinados perfiles de usuario.
WordPress lo llama Escritorio.
Organización
de contenidos
Páginas.
Post o entradas.
Multimedia.
Enlaces.
Son contenidos de carácter estático que no se actualizanen la portada, sino que ofrecen
información permanente a la que se puede acceder mediante menús de navegación.
Son contenidos de carácter dinámico, tipo noticias y temas nuevos, que se sitúan al comienzo de
la portada del sitio en orden cronológico.
Es contenido no textual como fotografías, sonidos, vídeos, etc., incluidos en las entradas.
Son listas de enlaces a otros sitios web y que se gestionan desde Escritorio > Enlaces. Los enlaces
se pueden organizar por categorías.
Gestión de
contenidos
Estáticos (páginas): no requieren organización.
Dinámicos (posts/entradas): asociados a categorías y subcategorías.
Widgets Programa o miniaplicación ejecutado por un motor o Widget Engine. Facilita el acceso a funciones frecuentes y que afectan a la información visual del sitio.
Gestión
de menús
Puede contener. Categorías. Páginas. Enlaces personalizados.
Van asociados a los temas.
111
2 Sistemas gestores de contenidos
Test de repaso
Soluciones: 1c, 2b, 3d, 4c, 5a, 6b, 7d, 8b, 9b, 10c, 11c.
1. ¿Cuál no es una función de los gestores de contenidos?
a) Creación de contenido.
b) Publicación de contenido.
c) Selección de contenido.
d) Edición de contenido.
2. ¿Qué no es el backend de un CMS?
a) Una parte del CMS.
b) Un usuario con privilegios.
c) La zona de administración.
d) El gestor del CMS.
3. WordPress no tiene:
a) Un editor WYSIWYG.
b) Variedad de temas.
c) Variedad de plugins.
d) Módulos.
4. Indicar la afirmación verdadera:
a) WordPress no permite insertar publicidad.
b) WordPress no gestiona archivos de audio y vídeo.
c) WordPress requiere validación de usuario.
d) WordPress requiere sindicación de contenidos.
5. Indicar la afirmación falsa:
a) WordPress no requiere un servidor web.
b) WordPress requiere un servidor de bases de datos.
c) WordPress no requiere LAMP.
d) WordPress no requiere plantillas.
6. La zona de sindicación se encuentra en:
a) El backend de WordPress.
b) El frontend de WordPress.
c) La configuración global.
d) No existe zona de sindicación.
7. El perfil de usuario Editor tiene:
a) Permisos para administrar plantillas de contenidos.
b) Permisos para modificar la estructura de los menús.
c) Permisos para administrar estadísticas.
d) Permisos para modificar entradas.
8. Una página siempre tiene su menú asociado:
a) Cierto.
b) Falso.
c) No existen páginas en los menús.
d) Ninguna de las anteriores respuestas es cierta.
9. Cuando se borra un menú, se elimina el menú seleccio-
nado, pero no las entradas contenidas en él.
a) Cierto.
b) Falso.
c) No existen artículos en los menús.
d) Ninguna de las respuestas anteriores es cierta.
10. Los metadatos de una entrada:
a) Indican el autor, el nivel de acceso del artículo y las
fechas de creación y publicación.
b) Indican el idioma de la entrada y el texto alternativo
del enlace Leer más.
c) Son palabras clave que luego se utilizarán en las
búsquedas para localizar la entrada.
d) No existen metadatos en las entradas.
11. Si tienes una extensión instalada en el portal, pero
no la estás utilizando, ¿qué frase supone una actitud
segura?:
a) No hay problema, no me molesta.
b) Sé que está ocupando espacio, pero tengo sufi-
ciente.
c) Creo que debería eliminarla, probablemente con-
suma recursos.
d) Si todo va bien, mejor no tocar nada.
Sistemas gestores de contenidos2
112
Comprueba tu aprendizaje
1. ¿Qué hecho histórico, de los comentados en esta uni-
dad, fue el más importante, según tu criterio? Razona y
justifica tu respuesta. Busca un hecho relacionado con
los gestores de contenido o suceso importante actual
que no esté reflejado en el documento sobre la historia,
U2_AW_Historia.pdf que puedes descargar del CEO.
2. ¿Es WordPress un sistema gestor de contenidos seguro?
3. Si quiero disponer de un portal WordPress, ¿qué es lo
que necesito?
4. ¿Qué son los metadatos?
5. ¿Cómo definirías los menús de WordPress?
6. ¿Qué identifica o representa el nivel de acceso en
WordPress?
7. El campo Slug de la categoría identifica:
a) Al usuario que ha creado la categoría.
b) Al menú que contiene dicha categoría.
c) A la propia categoría en la base de datos.
d) A la versión amigable de la URL del nombre.
8. Cuando se elimina una categoría:
a) Se queda archivada por si se requiere más tarde.
b) No puede contener ninguna entrada de contenido.
c) Desaparece del listado, pero no de la base de
datos.
d) Ninguna de las anteriores es cierta.
9. El perfil de usuario Editor puede:
a) Crear menús, pero no añadir ítems.
b) Crear menús y añadir ítems.
c) Crear entradas, pero no editarlas.
d) Crear entradas y editarlas.
10. ¿Qué significa que una entrada esté publicada y prote-
gida con contraseña?
11. ¿A qué hacen referencia las opciones de pantalla?
12. Indicar si la siguiente frase es verdadera o falsa:
«La organización jerárquica de contenidos implica que
dentro de una subcategoría puede haber una o más
categorías y dentro de una categoría puede haber uno
o más ítems de contenido.»
13. ¿Qué pasaría si en nuestro portal elimináramos el menú
TopMenu?
14. Los plugins de WordPress:
a) Modifican el comportamiento estándar de Word-
Press.
b) Son opciones de menú para instalar componentes.
c) Son parte de las plantillas de WordPress.
d) Ninguna de las anteriores es cierta.
15. Las plantillas en WordPress:
a) Solo existen para la parte pública del sitio web.
b) Definen la disposición del sitio web WordPress.
c) Solo determinan el aspecto estético del sitio web.
d) Ninguna de las anteriores es cierta.
16. ¿Crees que sería interesante permitir el registro automá-
tico de usuarios?
17. Indicar si la frase siguiente es verdadera o falsa y justi-
ficar la respuesta:
«El módulo Sindicación muestra enlaces de sindicación
que permiten a los visitantes suscribirse a las últimas
noticias de un portal.»
18. En WordPress, en general, es importante:
a) Instalar muchas extensiones para disponer de mayor
funcionalidad.
b) Actualizar el portal de cualquier web disponible.
c) Trabajar sobre el portal de producción para acelerar
los cambios y mejoras.
d) Ninguna de las anteriores es cierta.
19. Crea tu propio glosario con aquellos términos relacio-
nados con los CMS que no hayas entendido suficiente-
mente. Puedes utilizar una wiki para hacer el ejercicio
de forma colaborativa con otros compañeros, o utilizar
Google Docs.
20. Busca en Internet el vídeo más representativo y de
mayor calidad relacionado con la materia explicada
en la unidad. Sube el enlace al wiki de esta actividad
comentando el motivo por el que se ha elegido este
entre todos los existentes.
21. ¿Cuál crees tú que sería una pregunta adecuada para
examinar esta unidad? Proponla e indica en qué parte
de esta unidad se puede encontrar la solución.
3Unidad
Proyecto Emprende I
En esta unidad aprenderemos a:
• Crear nuestra propia empresa
como emprendedor.
• Crear los servicios web de nuestro
proyecto Emprende a partir de
lo aprendido en las dos
primeras unidades.
• Hacer crecer el proyecto a lo
largo del segundo trimestre
hasta la finalización de la
segunda parte al final
de curso.
Y estudiaremos:
• La aplicación de los contenidos
y los casos prácticos de las
unidades anteriores de este libro
en nuestra futura empresa.
• Los servicios estudiados para que,
debidamente combinados, permitan
optimizar el esfuerzo y rentabilizar
la inversión que supone trasladar
todos los recursos de la empresa
a la Web y disponer de ellos de
forma ubicua en cualquier
momento y en cualquier lugar.
• Todos los conocimientos
adquiridos a lo largo de este
tiempo para desarrollar el
mejor proyecto posible.
Proyecto Emprende I3
114
1. Oportunidades de futuro
En la actual sociedad del conocimiento en la que vivimos, el simple hecho de estar
estudiando temas específicos sobre informática y comunicaciones nos capacita para em-
prender un proyecto de futuro que nos apasione y nos plantee objetivosa alcanzar en
vuestra vida profesional. Como nos comentaba Fernando Alfaro Águila-Real en el prólo-
go de la anterior edición: «El ser humano se caracteriza por su capacidad de aprender
de los demás. De idear sobre la base de lo que oye. De construir e innovar sobre lo que
otros antes han aprendido. Esta característica ha sido el cimiento de la generación de
riqueza de la humanidad, nuestra base de progreso.» Por eso, tenemos que plantearnos
qué queremos hacer con nuestra vida y decidir desde ya si vamos a poder emprender
algo o no a lo largo de ella.
También comentaba Fernando sobre cuando estuvo estudiando en la universidad núme-
ro 1 del mundo: «Decía un profesor de la Universidad de Harvard: “Aprender antes que
los demás es la única ventaja competitiva sostenible a largo plazo”. Y decía bien, puesto
que el recurso más escaso de la Humanidad es el capital intelectual.» Por eso, debéis
«aprender a aprender» a lo largo de toda vuestra vida. Las exigencias de cambio son
tan grandes que no podemos despistarnos ni un momento o nos quedaremos fuera de
juego de inmediato.
1.1. Casos de éxito internacionales
En los comienzos de la informática, triunfaban las empresas llamadas start-up, que se
creaban en los garajes de las casas, como Apple o Microsoft. ¿Las conoces? ¿Y conoces
las historias de sus comienzos? No estaría mal que las buscases en Internet. ¿Cómo lo
harías? Supongo que utilizando un buscador de Yahoo, Google o Facebook, ¿no? Estas
son otras empresas que han triunfado. ¿Las conoces bien? ¿Sabes cómo surgieron?
Por ejemplo, las empresas YouTube, Skype o Instagram comenzaron con una idea muy
básica y luego han sido vendidas a otras empresas por miles de millones de dólares
(que al cambio en euros también son unos cuantos miles de millones). ¿Te gustaría ganar
ese dinero o un poco menos? Pues emprende. Existen muchas oportunidades de negocio
que han surgido con ideas muy simples. ¿Conoces Twitter? Con un programa que publi-
caba mensajes cortos (en principio pensados para caber en SMS), fíjate hasta dónde
han llegado ahora...
Dispones del prólogo comple-
to de la edición anterior de
Fernando Alfaro Águila-Real que
después de prejubilarse como
directivo de banca ya ha creado
varios proyectos empresariales
propios, junto a más compañe-
ros, como Aprende a pensar al
revés o Mandiva.
Aquí puedes ver qué hacen:
http://www.aprendeapensaral
reves.com.
Y aquí puedes ver quién es:
h t t p ://w w w.mad i va .com/
quienes-somos.
CEO
Microsoft es una empresa
estadounidense de tecnología
informática que comienza el 4
de abril de 1975, cuando fue
fundada por Bill Gates y Paul
Allen en Albuquerque. Y Apple
Computer, Inc. es otra empresa
estadounidense de tecnología
informática, fundada en 1976
por Steve Jobs y Steve Wozniak.
No estaría mal que leyeses un
poco sobre sus biografías y la
de otros como Jerry Yang y
David Filo, que fundaron Yahoo!
en 1994. O la de Sergey Brin
(con 23 años entonces) y Larry
Page (con 24), cuando funda-
ron Google en la primavera de
1995. Sin olvidar al último en
incorporarse al club de los jóve-
nes multimillonarios del mundo,
que es dueño de Facebook.
¿Sabes de quién te hablo?
¿Sabías que…?
Fig. 3.1. Empresas que han triunfado en Internet.
Empresas que han triunfado en internet
115
3Proyecto Emprende I
1.2. Y en nuestro país
Bueno, pensarás que todas estas empresas son internacionales, por no decir esta-
dounidenses; que esto aquí no pasa. Pero no es así. Talento hay en todo el mundo,
solo falta que descubras qué te diferencia del resto y te va a permitir llegar a la cima
del conocimiento o del éxito (junto con el equipo de compañeros con el que realices
ese proyecto).
Los inicios de Internet en España surgieron en 1985 con el Proyecto de Interconexión
de Recursos Informáticos (RedIRIS), gracias a la puesta en marcha del Plan Nacional
de Investigación y Desarrollo. Desde entonces, ha habido numerosos casos de éxito en
España. Por ejemplo, uno de los primeros fue David del Val, que en 1994 se marchó
de becario a la meca de la tecnología, Sillicon Valley, donde creó la empresa VXTreme
dedicada a transmitir audio y vídeo por Internet. Vendió su empresa por unos 10.000
millones de pesetas (al cambio, unos 60 millones de euros) y tres años después ya era
directivo de la división de vídeo de la empresa de Bill Gates, pasando a trabajar en
el cuartel general de Microsoft en Redmon, Seattle, en el estado de Washington. Pue-
des obtener más detalles de su aventura en http://www.elmundo.es/navegante/99/octu
bre/03/david.delval.html.
Pero no siempre hay que irse fuera para triunfar. Uno de los primeros en conseguir el
éxito en su tierra fueron los hermanos Barrabés. Tenían una tienda especializada en ma-
terial de esquí y alta montaña en Huesca, y en 1994 trasladaron su negocio a Internet,
creando uno de los primeros portales de venta (www.barrabes.com) que hoy día es una
referencia en el mundo de estos deportes. Y han ido evolucionando al ampliar sus mo-
delos de negocio y crear uno de los mayores grupos de empresas dedicadas a Internet
del país (para saber más, visita http://www.barrabes.biz).
Durante estos primeros años hasta hoy, han existido otros muchos pioneros, como Fran-
cisco J. Martín, el Bill Gates valenciano, como le denominó el periódico Las Provincias
en 2010 (http://www.lasprovincias.es/v/20100215/comunitat/martin-bill-gates-valen
ciano-20100215.html). En el año 2000 vendió al Banco Santander su primera empresa
(Internet Sotware Component, ISOCO - www.isoco.com/quienes-somos/historia) por
2.000 millones de pesetas (unos 12 millones de dolares). Posteriormente, consiguió una
ampliación de capital de su empresa Strands (http://strands.com) de cien millones de
dólares. Recientemente ha creado otro proyecto desde Oregón, denominado BigML,
dedicado a analizar la ingente cantidad que genera cada día la Internet Oculta, para
sacar conocimiento de toda ella para otras empresas, a través de algoritmos de Inteli-
gencia Artificial.
Otro de los casos de éxitos más sonados de los últimos años es Panoramio, que actual-
mente es de Google. Fue fundada en 2005 por dos jóvenes, Joaquín Cuenca y Eduardo
Manchón (http://www.eduardomanchon.com). Se dedicaban a reunir las fotos que sus
usuarios realizaban y geoposicionarlas en Google Earth y Google Maps.
Pero hay muchos más. Al margen, tenéis la referencia a un post titulado: «Emprendedo-
res adolescentes: no juegan a la “Play”, desarrollan aplicaciones.» ¿Quieres aparecer
en la próxima lista de emprendedores adolescentes? Ánimo, espero que este proyecto te
apasione igual que a nosotros. Con pasión, se puede llegar muy lejos.
Actualmente, David del Val ha
regresado a España y ha funda-
do una nueva empresa llamada
InOutTV.
Por otro lado, también os reco-
mendamos que veáis el vídeo de
la entrevista a Carlos Barrabés
en el programa Cámara Abierta
2.0 de RTVE http://www.
barrabes.biz/barrabes_and
_friends/carlos-barrabes-en
-camara-abierta-2-0.
¿Sabías que…?
Conferencia de Eduardo
Manchón sobre Panoramio:
http://territori.blogs.uoc.edu/
2010/07/video-de-la-conferencia
-deduardo-manchon/.
Web del artículo sobre
«Emprendedores adolescentes:
no juegan a la “Play”, desa-
rrollan aplicaciones»: http://
w w w . r t v e . e s / n o t i c i a s /
20120621/emprendedores
-adolescentes-no-juegan-play
-desarro l lan-apl icaciones/
538288.shtml.
Web
Fig. 3.2. Tuit de intenciones del espíritu emprendedor de Carlos Barrabés.
Proyecto Emprende I3
116
2. Nuestra empresa, sí, nuestra
Es necesario plantearse, como opción de futuro profesional, el autoempleo. Ser tú mismo
tu propio jefe. Si hasta ahora no habías pensado en esta opción, ha llegado el momento
de hacerlo. Normalmente, solemos preguntarnos: «De todo esto, ¿qué es o hay para
mí?» Pues, si eres el dueño, la parte que te corresponda será tuya.
En esta unidad vamos a organizar y planificar las estrategias para obtener unos resulta-
dos parecidos a los que serían deseables si enun futuro das el paso, y llevas a cabo tu
propio emprendimiento. Vamos a crear una empresa virtual, es decir, intentaremos crear
lo mismo que la empresa real, pero sin invertir dinero. Para ello podemos establecer
equipos de tres o cuatro personas, según las indicaciones del profesor. Vais a tener que
asumir funciones tanto técnicas como administrativas. Existen infinidad de posibilidades.
Por ejemplo:
• Crear una empresa de ayuda y asesoramiento al cliente para el posicionamiento
SEO.
• Crear una empresa dedicada a la personalización de CMS para sus clientes en fun-
ción de su área de actuación.
• Crear una empresa de ayuda y formación de profesionales en el ámbito del eLear-
ning (ofertar cursos a las administraciones educativas, elaboración de materiales di-
dácticos, aprendizaje de idiomas...).
• Crear una empresa de gestión de puestos de trabajo (poner en contacto empresas
con buscadores de empleo).
Para este proyecto, hemos seleccionado como empresa una franquicia de formación
on-line sobre técnicas de venta en la Red y posicionamiento SEO.
2.1. Tareas administrativas
Estas suelen ser las tareas que menos gustan a las personas con perfil técnico. Pero hay
que tener en cuenta que si queremos triunfar, hemos de asumir estas tareas para capa-
citarnos y saber trabajar en equipo haciendo las cosas bien. Planteamos los perfiles o
roles siguientes que os repartiréis entre vosotros.
1. Gerente y Jefe de Recursos Humanos (RR. HH.).
2. Jefe de Reputación on-line y coordinador de la creación y actualización de los mate-
riales educativos on-line.
3. Jefe de Logística y coordinador de los cursos de formación.
4. Jefe de Investigación, desarrollo e innovación (I + D + i), solo en los equipos de cua-
tro personas. En los de tres (según indique el profesor) se puede repartir a cada uno
una responsabilidad diferente u omitirla.
2.2. Tareas técnicas
Habrá que disponer de estos perfiles de trabajo más técnico:
A. Jefe de Social Media e Identidad digital corporativa.
B. Jefe del CMS y Blog corporativo.
C. Jefe de las Wikis e Información interna.
D. Jefe de Internet móvil, solo en los equipos de cuatro personas. En los de tres (según
indique el profesor) se puede repartir a cada uno una plataforma móvil (entre iOS,
Android y Windows Phone) u omitirla.
Presentación de Think Big,
el programa de apoyo para
jóvenes emprendedores de la
Fundación Telefónica: http://
youtu.be/7sWB90VvzvI.
Conferencia de la presentación
de Sonar Ventures, una lan-
zadera de start-ups española:
www.youtube.com/watch?v=
rNgXEcUZRMI.
El programa Conecta España
te muestra un gran número de
emprendedores conectados a los
que puedes ayudar con tu empre-
sa: http://www.conectandoem
prendedores.com.
¿Te atreves a soñar? es un vídeo
motivador que explica la base
fundamental del espíritu empren-
dedor para que «disfrutes del
placer de convertir tus sueños en
realidad».
http://youtu.be/i07qz_6Mk7g.
Web
117
3Proyecto Emprende I
3. Parte administrativa
Vamos a necesitar contar con la ayuda del profesorado del departamento de FOL.
Dependiendo de la Comunidad Autónoma en la que estéis estudiando, este módulo se
imparte en el primer curso (consultar al profesor de FOL) o en el segundo (consultar al
profesor de EIE). Vamos a detallar las responsabilidades de cada uno de estos roles.
Para cada franquicia y en la parte administrativa, las tareas a desarrollar serán las
siguientes:
4. Parte técnica
Vamos a necesitar contar con la ayuda del resto de profesores del Departamento de
Informática y Comunicaciones. Dependiendo de la Comunidad Autónoma en la que
estéis estudiando, este módulo se imparte en el primer curso (consultar al profesor de
Redes Locales) o en el segundo (consultar al profesor de Servicios en Red) para todo lo
relacionado con dominios. Estas son las responsabilidades de cada rol:
1. Gerente y Jefe de Recursos Humanos (RR. HH.) 2. Jefe Reputación on-line y materiales educativos
Vas a coordinar tu equipo creando un calendario para todos.
Vas a tener que rellenar los papeles para crear la empresa de
manera virtual.
Contratación del profesorado on-line, diseñador gráfico y del perso-
nal técnico que lleva el CMS y Moodle.
Vas a proponer nombres para la empresa (que elegiréis entre todos).
Vas a hacer un seguimiento de lo que se habla de ella en Internet.
Vas a escribir las actas de las reuniones que tengáis (tanto iniciales
como semanales) entre todos los miembros del equipo, aunque sean
por Internet.
3. Jefe de Logística y materiales educativos 4. Jefe de I + D + i (opcional)
Vas a investigar cuánto os costaría comprar un dominio propio y su
hospedaje.
Vas a ver cómo os financiaríais para pagar los gastos.
Vas a buscar clientes potenciales para quienes os interesaría trabajar.
Vas a investigar vuestro nicho de mercado.
Vas a desarrollar un prototipo de idea que cubra
una necesidad del mercado.
Vas a innovar presentando tu creatividad ante
tus compañeros de equipo.
Tabla 3.1. Roles y responsabilidades de la parte administrativa.
A. Jefe de Social Media e Identidad digital corporativa B. Jefe del CMS y Blog corporativo
Instala o crea las cuentas donde hayáis decido estar presentes (correo
corporativo, Twitter, Facebook, etc.).
Configura todas ellas para que estén enlazadas con el resto de servi-
cios de tu empresa.
Actualiza los contenidos de estos usuarios a partir de los contenidos
que generéis en el CMS, blog u otros, hasta que realicéis la segunda
parte del proyecto a final de curso.
Instala y configura el CMS y el blog con WordPress; añade los com-
plementos que decidáis entre todos, sobre todo los que os permitan
difundir vuestro trabajo a través de los medios sociales.
Actualiza los contenidos del CMS y el blog hasta que realicéis la
segunda parte del proyecto a final de curso.
Publicita los cursos de formación, junto con su planificación, guión,
horas y precios.
C. Jefe de Wikis e información interna D. Jefe de Internet móvil (opcional)
Instala el sistema wiki que hayáis elegido.
Configúralo para guardar toda la información interna que vayáis
generando, como manuales o guías de estilo para ir creando vuestra
propia cultura empresarial.
Actualiza los contenidos tanto internos como externos, por ejemplo
en la Wikipedia, crea una entrada para presentar la empresa al
resto del mundo, donde aparezcan todos los servicios que hayáis
activado.
Instala en los smartphones o tablets de tu equipo aquellas aplicacio-
nes que creas interesantes para vuestro proyecto.
Configura los servicios anteriores para que se adapten a Internet
móvil.
Actualiza la información que encuentres sobre Internet móvil para
crear entradas en el blog.
Tabla 3.2. Roles y responsabilidades de la parte técnica.
Proyecto Emprende I3
118
5. ¿Cómo empezamos? Plan de trabajo
Como planteamiento inicial para esta primera parte, vamos a dedicarle entre cuatro y
cinco semanas. Por tanto, tenemos que detectar una necesidad en el mercado actual
que nuestro producto pueda cubrir. Para ello cada miembro del equipo asumirá un rol
administrativo y otro técnico, de los que se hará cargo durante todo el curso.
5.1. Creemos nuestros espacios web
Con todo lo aprendido hasta este momento en las dos primeras unidades, vamos a crear
nuestro marco inicial de trabajo colaborativo. Comprobaremos qué somos capaces de
hacer para situar nuestra empresa dentro de la sociedad de la información del siglo XXI.
A grandes rasgos, las tareas a desarrollar en esta primera fase serán:
1. Creación del entorno de trabajo colaborativo, para poder comunicarnos y organizar-
nos internamente como empresa.
2. Posicionamiento en la Red y posicionamiento social, dándonos a conocer en las prin-
cipales redes sociales y registrando nuestro dominio.
3. Creación del sitio web corporativo, que será la cara más visible de nuestra empresa
y alrededor de la cual se articulará todo su funcionamiento.
Creación del entorno de trabajo corporativo
Para empezar a trabajar, necesitamos un entorno de trabajo adecuado.Planteaos con
qué multinacional de Internet estáis más cómodos y cread vuestros servicios web con
ella, por ejemplo, con Google Apps o con Windows Live, o cualquier otra que os guste
más. Una vez que lo tengáis, cread:
1. Una cuenta de correo para cada uno de vosotros.
2. Un calendario de trabajo conjunto para coordinar vuestras agendas.
3. Documentos de trabajo colaborativo donde plasmar vuestras ideas sobre el negocio.
Estos documentos pueden contener tormentas de ideas sobre temas concretos a tratar
en los cursos de formación, sugerencias sobre los contenidos de los cursos ofertados,
sugerencias sobre herramientas de creación de dichos contenidos, etc.
4. Individualmente, deberéis crear un blog en la plataforma Blogger con vuestro perfil
de la empresa (donde indicaréis qué funciones tenéis, etc.). Podéis crear un gravatar
(http://es.gravatar.com) para dar forma a vuestra identidad en el blog y más ade-
lante en vuestro entorno virtual de aprendizaje Moodle.
5. Además, deberéis crearos una wiki interna de la empresa donde ir almacenando los
contenidos de formación, redactados para los cursos internos, tanto aquellos que se
impartirán a los futuros empleados como los ofertados a los clientes de la empresa.
6. Deberéis también crear un escritorio virtual de trabajo donde seguir las fuentes de
sindicación de contenidos a través de RSS o ATOM con Google Reader, Bloglines,
MyYahoo!, Netvibes o FeedReader.
7. Así como todo lo que os indique de más vuestro profesor para llevar a buen puerto
vuestro primer proyecto empresarial.
Detectando una necesidad: la
empresa cloid.net ha detectado
que las tarjetas profesionales
ya no sirven en la sociedad de
la información, ni si quiera los
códigos QR. Por eso, ha lanza-
do una solución en la nube para
conectar a personas o, mejor
aún, crear algo que no exis-
te pero que será necesario en
un futuro no muy lejano, como
lo fueron YouTube, Facebook o
Twitter cuando empezaron.
Ejemplos
¿Cómo lo planteamos? Tenemos que ver si partimos de una gran
idea que nos marque el camino a seguir para crear nuestra
startup de garaje o bien si vamos a ser una empresa de servi-
cios que asesore y gestione los servicios web a otras empresas,
creando sus páginas web ad hoc o con un CMS. Los dos pri-
meros años son cruciales para saber si el proyecto se consolida
o se abandona. Si no funciona, no debemos lamentarnos: es
una experiencia enriquecedora que en otros países es muy
valorada. De hecho, a veces se aprende más de los errores que
de los éxitos.
Ejemplos
En este sitio web, puedes
encontrar cinco casos de éxito
de empresas españolas con
una buena estrategia de social
media en las redes sociales
para aumentar su negocio.
Seguro que han sido especia-
listas como tú los que las han
asesorado para alcanzar este
éxito: http://desenredandolared.
com/2012/01/25/cinco-casos
-de-exito-espanoles-en-redes
-sociales/.
Web
En esta página web del
Ministerio de Educación pue-
des encontrar un Monográfico
sobre Redes Sociales: http://
recursostic.educacion.es/obser-
vatorio/web/es/internet/web-
20/1043-redes-sociales.
Web
119
3Proyecto Emprende I
Posicionamiento en la Red y posicionamiento social
Una vez que tengamos definido nuestro entorno de trabajo colaborativo en Internet,
deberemos posicionarnos en la Red comprando nuestro dominio web.
Debemos tener en cuenta que, además del posicionamiento en la Red, también es im-
portante el posicionamiento social, para lo cual deberéis crear las cuentas en las redes
sociales tanto verticales como horizontales donde vayáis a publicitaros, como, por ejem-
plo, Twitter, Facebook, Google+, LinkedIn, o incluso la nueva red social de Microsoft
(http://www.so.cl) o cualquier otra que consideréis interesante.
Creación del sitio web corporativo con WordPress
Es el momento de poner cara a todo vuestro trabajo. Vais a crear un blog con WordPress
u otro CMS conocido por vosotros, como Joomla!, Drupal, etc. Este blog estará centrado
en vuestro negocio, y en él iréis publicando entradas con información de interés sobre
vuestros avances y logros, o incluso las noticias que aparezcan sobre vosotros en los
medios tradicionales de noticias, como prensa, radio o televisión. Los requisitos de esta
fase son los siguientes:
1. Instalación de dos entornos de WordPress, uno local para pruebas y otro externo,
bien contratado o bien en un servicio de alojamiento gratuito, sobre el que exporta-
réis lo que realicéis en las pruebas.
2. Adecuación del frontend del portal a las necesidades de la empresa y creación de
las secciones y/o categorías correspondientes, por ejemplo:
• Home: que será vuestra carta de presentación en vuestra web.
• Quiénes somos: quiénes estáis detrás de este magnífico proyecto. Esta sección
deberá contener también enlaces a vuestros blogs personales en Blogger.
• Somos diferentes: donde indicaréis qué es aquello que os diferencia de la compe-
tencia.
Existen en la Red multitud de sitios
que os ofrecen alojamiento web
gratuito. Podéis buscarlos fácil-
mente en Google. Uno de ellos,
interesante, es htttp://byethost.
com/, que ofrece sitios web con
preinstalaciones de algunos
CMS, entre ellos WordPress.
Claves y consejos
En Internet puedes encontrar
miles de plantillas gratuitas y per-
sonalizables para tu WordPress.
Puedes empezar echando un
vistazo a:
http://wordpress.org/extend/
themes/.
http://www.web2feel.com/.
Web
Fig. 3.3. Red social de Microsoft.
SoLoMo. Recientemente viene
difundiéndose en Internet este
nuevo concepto que es la unión
de tres términos relacionados
con el social media: Social+Lo-
cali zación+Movilidad.
Vocabulario
Proyecto Emprende I3
120
• Ejemplos/Productos/Casos de éxito: vuestros productos o clientes de mayor con-
fianza. Esta página deberá enlazar con sitios web que hayáis creado en portales
como Weebly o Google Sites como casos de éxito o para mostrar vuestros pro-
ductos (por ejemplo, la Web de alguno de vuestros clientes, en el caso de una
empresa de desarrollo web o, en el caso de una agencia de viajes, una oferta
concreta para un viaje determinado).
• Blog: será el blog oficial de vuestra empresa, donde podéis dar a conocer nove-
dades u opiniones.
• Contacto: un formulario que sirva para ponerse en contacto rápidamente.
3. El portal corporativo debe ser multilingüe: español, inglés y, si el profesor lo considera
oportuno, el idioma de la comunidad autónoma correspondiente, si compete.
4. Establecimiento de mecanismos para que los visitantes puedan sindicarse a las noti-
cias o el blog a través de RSS.
5. Instalar un sistema de gestión de contenidos para el Foro tipo phpBB (https://www.
phpbb.com) o crear unos foros en Google Groups u otros.
6. Preparación de un formulario para la página de contacto.
7. Elección de una plantilla para la empresa y personalización o modificación de su
estilo a través de CSS.
Al final del curso nos volvemos a ver en la segunda parte de este apasionante proyecto.
Cuando modifiquemos nuestras
plantillas de WordPress, es pre-
ferible hacerlo en nuestro entor-
no local de pruebas, para subir-
lo una vez que hayamos dado
en el diseño que deseamos.
Además, algunos navegadores
web como Firefox o Chrome
nos ayudan a analizar la estruc-
tura de las páginas web y sus
estilos. Por ejemplo, en Firefox
accederemos a Desarrollo web
> Inspeccionar, o directamente
con Ctrl+Shift+I.
Además, la herramienta de ins-
pección de Firefox nos ofrece
una vista 3D con los elementos
superpuestos de la página para
facilitar su ubicación.
Importante
Os proponemos siete posibles
mejoras o ampliaciones para
la empresa de franquicias de
formación on-line sobre técnicas
de venta en la Red y posiciona-
miento SEO que os proponíamos
de ejemplo:
• Analizar las últimas técnicas
de posicionamiento SEO.
• Analizar las técnicas de venta
en Red más novedosas.
• Establecer las líneas generales
para la elaboración de mate-
riales on-line.
• Decidir qué contenidos se
adaptan a las técnicasde ven-
ta y posicionamiento SEO.
• Proponer la elaboración de
una batería de cursos en base
al Epígrafe 4.
• Coordinar la actualización
permanente de dichos cursos.
• Proponer mecanismos o formas
de difusión de estos cursos.
Claves y consejos
Fig. 3.4. Herramienta Inspeccionar de Firefox.
Fig. 3.5. Herramienta de inspección 3D de Firefox.
4Unidad
Almacenamiento web
y multimedia
En esta unidad aprenderemos a:
• Utilizar aplicaciones de
almacenamiento y multimedia en
la Web para diferentes tipos de
archivos.
• Diferenciar los distintos sistemas
de almacenamiento en Internet,
así como sus principales usos.
• Conocer algunos de los servicios
web multimedia de audio,
imagen y vídeo de la
Web 2.0 actual.
Y estudiaremos:
• Diferentes aplicaciones y servicios
de almacenamiento web
(proveedores de almacenamiento,
gestores de descargas, gestores
de imágenes y gestores de vídeo
y de audio).
A lmacenamiento web y multimedia4
122
1. El almacenamiento en la nube
Con el tiempo, los dispositivos de almacenamiento secundario han ido creciendo en
capacidad, velocidad y portabilidad: desde los disquetes hasta los discos duros exter-
nos, pasando por dispositivos como CD-ROM, DVD o Blue-rays. Aun así, las necesi-
dades, tanto de usuarios como de empresas, ya no solo de almacenamiento seguro y
de gran capacidad, sino de mayor disponibilidad y posibilidad de distribución a otros
usuarios han facilitado la aparición de nuevos servicios de almacenamiento basados
en web.
1.1. Almacenamiento en la Red
Los volúmenes de información que los usuarios (ya sean domésticos o empresas) gene-
ramos requieren de sistemas de almacenamiento eficaces y seguros que eviten pérdidas
y aseguren al mismo tiempo la integridad y disponibilidad de la información. Estos re-
querimientos, cada vez más elevados, necesitan recursos que muchas veces superan las
capacidades de infraestructura de un particular o una empresa convencional.
Por otra parte, la movilidad de los usuarios y la variedad de dispositivos que manejan
hacen imprescindible la copia de seguridad de toda clase de datos para que, además
de almacenarse de forma segura, permanezcan accesibles desde cualquier lugar.
Servicios como el FTP o el correo electrónico ayudaron a facilitar esta tarea a los usua-
rios, pero con el desarrollo de Internet y el modelo de computación en la nube o cloud
computing, han aparecido gran cantidad de servicios basados en web y con una fácil
integración en nuestros sistemas que ayudan en gran medida a compartir y mantener
disponibles e íntegros nuestros ficheros, permitiendo el acceso seguro (generalmente de
forma cifrada) desde cualquier tipo de dispositivo: teléfonos móviles, tabletas o repro-
ductores multimedia que dispongan de acceso wifi o 3G.
Según el propósito de estos servicios de almacenamiento en Internet, podemos clasificar-
los en dos grandes categorías:
• Servicios de almacenamiento de archivos, como RapidShare, MediaFire, BitShare o
el extinguido MegaUpload, orientados al almacenamiento y distribución de grandes
archivos.
• Servicios de disco duro virtual, como Dropbox, Windows Live SkyDrive o Google
Drive, orientados al almacenamiento y sincronización de archivos personales y copias
de seguridad entre varios dispositivos.
1.2. Almacenamiento
de archivos multimedia
Los archivos multimedia, ya sean imá-
genes, sonido o vídeo ocupan por nor-
ma general un volumen mucho mayor
que los archivos comunes, y requieren
además mayores anchos de banda
para su transmisión, por lo que nece-
sitan sistemas específicos para su al-
macenamiento. Cada vez hay más si-
tios web que ofrecen la posibilidad de
guardar estos tipos de archivos para
compartirlos fácilmente, ya sea a tra-
vés de blogs, wikis o redes sociales,
haciendo posible además su edición
on-line.
Disponibilidad. Propiedad de la
información que le permite ofre-
cerse ante cualquier petición de
usuarios o procesos autorizados
en cualquier momento.
Integridad. Propiedad de la infor-
mación que la mantiene inaltera-
ble, de modo que solo pueden
modificarla las entidades auto-
rizadas (ya sean personas o
procesos) de manera controlada.
Vocabulario
Las empresas que empezaron
a ofrecer estos servicios son
Amazon y Sun. Amazon, a través
del AWS (Amazon Web Services),
ofrece el servicio de almacena-
miento Amazon S3 (Amazon
Simple Storage Services) y el ser-
vicio de computación Amazon
EC2 (Elastic Compute Cloud). A su
vez, Sun dispone en su Sun Cloud
Computer del servicio de alma-
cenamiento Sun Cloud Storage
Service y del servicio de computa-
ción Sun Cloud Computer Service.
En los últimos años, empresas
como Google con Drive, Apple
con Cloud o Microsoft con
SkyDrive se han unido a ellas en
la oferta de este tipo de servicios.
¿Sabías que…?
Algunos aspectos a tener en
cuenta para decantarse por
algún sistema de almacenamien-
to en línea son:
• La capacidad, tanto total como
del tamaño máximo de los fi-
cheros.
• El precio, desde servicios gratui-
tos hasta diferentes planes de
pago, en función de la veloci-
dad, capacidad o publicidad.
• Tipo de servicio, se trata de sis-
temas para la distribución de fi-
cheros, copias de seguridad, etc.
• Aplicaciones necesarias para
su uso, que cubren desde un
navegador web hasta aplica-
ciones específicas.
• Las opciones de seguridad
que ofrezca.
Claves y consejos
Fig. 4.1. Almacenamiento en la nube.
123
4A lmacenamiento web y multimedia
2. Servicios de almacenamiento y
distribución de archivos
Los servicios de almacenamiento y distribución de archivos ponen a disposición de la
comunidad de usuarios un volumen de información que puede descargarse libremente
a través de un enlace. Entre los más populares se encuentran RapidShare, File Dropper,
MediaFire o BitShare, sin olvidarnos del que fue el abanderado de estos servicios y ya
desaparecido MegaUpload.
2.1. Generalidades
Los servicios de almacenamiento están diseñados para alojar contenido estático –por
lo general, archivos de gran tamaño– y permiten el acceso a través de la Web o un
cliente FTP.
El funcionamiento es sencillo: cuando se sube un archivo, se le asigna una URL corta
desde la que puede recuperarse a través de un navegador.
Aquellos servicios que permiten a cualquier usuario subir archivos de su disco duro al
servidor, de forma sencilla, gratuita y sin necesidad de registro, suelen conocerse como
alojamientos inmediatos o one-click hosting.
Estos servicios de almacenamiento permiten, además, diversos tipos de acceso, si bien
en la mayor parte de los casos se agrupan en dos modalidades: gratuitos o de pago.
A la hora de decantarnos por alguno de estos servicios, podemos tener en cuenta as-
pectos como:
• La capacidad de almacenamiento global y el tamaño máximo por fichero.
• El límite de transferencia en un periodo de tiempo, que es el tiempo que debemos
esperar después de haber descargado cierta cantidad de datos, suele venir dado en
horas o días.
• La caducidad de los archivos subidos, ya que, en muchos casos, los archivos desapa-
recen después de cierto tiempo sin haber sido descargados.
• La capacidad de descarga simultánea de varios ficheros.
Aparte de estos parámetros, también pueden ser factores influyentes el tiempo de es-
pera antes de iniciar la descarga de un fichero (para cuentas gratuitas), el precio (en
cuentas de pago), o la existencia de un gestor de ficheros que permita organizar nuestro
espacio remoto por carpetas o grupos para facilitar su acceso. Veamos en la Tabla 4.1
una comparativa de algunos de estos servicios:
Las redes entre iguales (p2p)
como eMule y Bittorrent tienen el
mismo objetivo: compartir infor-
mación con una comunidad de
usuarios. En este tipo de redes,
la información no se almacena
en ningún servidor de Internet,
sino en los ordenadores de los
usuarios. Con esta tecnología
se han desarrollado programas
como Pando, una adaptación de
Bittorrent, y el conocido eMule.
¿Sabías que…?
1. Conel tiempo, es posible que los servicios de alma-
cenamiento aumenten sus capacidades para ser más
competitivos. Consulta las páginas web de los diferen-
tes sitios de almacenamiento de ficheros y actualiza en
tu cuaderno la Tabla 4.1:
– www.rapidshare.com – www.mediafire.com
– hotfile.com – www.4shared.com
– www.gigasize.com – www.filefactory.com
– www.fileserve.com – www.depositfiles.com
2. Realiza la misma tabla en tu cuaderno, pero ahora
muestra en ella las características de las opciones de
pago. Indica los precios en lugar del tiempo de espera.
3. Además de haber cambiado las condiciones de los ser-
vicios anteriores, puede haber aparecido algún nuevo
servicio de almacenamiento en los últimos meses. Inves-
tiga en la Red sobre estos nuevos servicios y añádelos
a la Tabla 4.1.
Actividades
A lmacenamiento web y multimedia4
124
2.2. RapidShare
La empresa alemana RapidShare ofrece un servicio de alojamiento y distribución de
archivos en Internet sencillo y asequible, y con cierta visión empresarial, ya que es de
los pocos que ofrece un gestor de descargas para Linux.
Como la mayoría de estos servicios, ofrece la posibilidad de alojar archivos de forma
gratuita, con ciertas limitaciones, o de pago (cuentas premium), con menos restricciones.
Se trata de un servicio que permite la descarga de 5 GB diarios por cuenta gratuita,
aunque puede aumentar en las modalidades de pago.
4. Entra en http://es.creative
commons.org/licencia/,
y analiza los diferentes
tipos de licencias Creative
Commons que existen: BY,
BY-NC, BY-NS-SA, BY-
NC-ND, BY-SA, BY-ND.
Actividades
Los portales de almacenamiento
y distribución de archivos se
ven frecuentemente inmersos en
problemas referentes a derechos
de autor, ya que el contenido
que guardan los usuarios puede
tener copyright, pudiendo inclu-
so suponer el cierre del portal,
como pasó con MegaUpload.
Importante
Cuando subes un archivo a Internet, debes ser respetuoso con los derechos de autor, y no
subir archivos que estén protegidos por copyright. Una buena opción de distribuir tus pro-
pios ficheros es hacerlo bajo licencias libres como Creative Commons. Las licencias Creative
Commons ofrecen derechos a terceras personas bajo ciertas condiciones:
• Reconocimiento (Attribution): se debe reconocer la autoría de la obra en cualquier explo-
tación de esta.
• No comercial (Non commercial): no se puede utilizar para fines comerciales.
• Sin obras derivadas (No Derivate Works): no permite la creación de trabajos derivados.
• Compartir igual (Share alike): si se permite la creación de trabajos derivados, estos se
deben poder distribuir bajo las mismas licencias.
Tienes más información en: http://es.creativecommons.org/licencia/.
¿Sabías que…?
Fig. 4.2. Logo de Creative
Commons.
Capacidad
total
Tamaño
máximo
de archivo
Límite de
transferencia
Caducidad
de archivos
¿Permite
descarga
simultánea?
Tiempo
de espera
¿Permite
gestión de
archivos?
No procede 2 GB No 30 días No Variable Para miembros
50 GB (gratis)
250-1.000 GB
(pago)
200 MB (gratis)
4-10 GB (pago)
200 MB/ archivo Previo aviso Sí No Para miembros
No procede 2.000 MB 30 min 90 días No 15s Via FTP
15 GB 10 MB No 180 días No Variable Sí
2 GB 300 MB 10 archivos /
8 horas
20 o 45 días No Variable Para miembros
2 GB 500 MB 150 MB/h 90 días No 30s Para miembros
500 GB 1 GB Variable 60 días No 20s Sí, además FTP
No procede 10 GB Variable 30 días No 100s No
Tabla 4.1. Características de los servicios de almacenamiento y distribución de archivos.
125
4A lmacenamiento web y multimedia
Uso básico de RapidShare
Duración: 15 minutos Dificultad: baja
Objetivos:
• Crear una cuenta en RapidShare.
• Subir archivos.
• Compartir archivos con nuestros contactos.
Solución:
1. Creación de la cuenta
Accedemos al portal https://www.rapidshare.com, y nos registramos a través de
la opción Register, ubicada en la parte superior derecha de la pantalla, o bien
mediante Create Account. Si ya disponemos de un usuario, simplemente ingresare-
mos mediante nuestro Username y Password.
Caso práctico 1
Fig. 4.3. Página principal de RapidShare.
Cuando introduzcamos nuestros datos y creemos la cuenta,
RapidShare nos enviará un correo con un enlace para
activarla. Solo tendremos que acceder a nuestro correo y
hacer clic en el enlace.
Una vez que activemos la cuenta, se nos mostrará la ven-
tana MiRapidShare asociada a nuestra cuenta, donde
podemos cambiar nuestros datos, así como el idioma de la
interfaz o la vista que queramos utilizar.
Fig. 4.4. Registro de usuario.
Fig. 4.5. Envío del correo de activación de la cuenta.
Fig. 4.6. Correo de activación. (Continúa)
A lmacenamiento web y multimedia4
126
2. Subiendo archivos
Para subir un archivo, una vez registrados, simplemente
deberemos hacer clic en el botón Upload de la Visión
general, para abrir el gestor de subidas y hacer clic en el
botón Seleccionar archivos.
Como podemos apreciar, existen dos secciones principales
dentro de Cargar archivos: Cargas actuales, y Mis carpe-
tas, donde podemos ver respectivamente los ficheros que
estamos subiendo actualmente, y la estructura de carpetas
en que organizamos nuestros archivos.
Seleccionaremos un fichero cualquiera de nuestra carpeta de
usuario, en nuestro caso, curriculum.odt, y vemos cómo auto-
máticamente se inicia la subida del archivo a la carpeta root.
Una vez subido el fichero, nos ofrece su URL, para poder
acceder a él desde cualquier navegador. Como podemos
apreciar, RapidShare tiene la propiedad de incluir el nom-
bre del archivo en la misma URL.
Si lo deseas, para organizar tus archivos, puedes hacer clic
en el icono correspondiente al lado de Mis carpetas, repre-
sentado con una carpeta y el signo +.
3. Compartir el archivo
Para compartir el fichero con nuestros contactos, haremos
clic en el icono de compartir (el punto y las flechas naranja
de la derecha). Con esto, abriremos un asistente que nos
guiará en el proceso de compartir nuestros ficheros subi-
dos, bien a través del correo electrónico (como se muestra
en las Figs. 4.10 a 4.12) o redes sociales como Facebook
o Twitter.
Caso práctico 1
(Continuación)
Fig. 4.7. Ventana MiRapidShare.
Fig. 4.8. Selección de archivos.
Fig. 4.9. Carga del archivo.
(Continúa)
127
4A lmacenamiento web y multimedia
Caso práctico 1
(Continuación)
(Continúa)
El administrador de archivos
Duración: 15 minutos Dificultad: baja
Objetivos:
• Crear carpetas en RapidShare mediante el adminis-
trador de archivos.
• Subir archivos mediante el administrador de archivos.
• Eliminar los archivos subidos.
• Crear paquetes de ficheros.
Solución:
1. Acceso
En primer lugar, vamos a volver a acceder al sitio principal
de RapidShare (www.rapidshare.com) y haremos clic en la
pestaña MiRapidShare.
Fijémonos en que a la izquierda nos aparece un menú, en
el que deberemos seleccionar Administrador de archivos.
Caso práctico 2
Fig. 4.10. Compartiendo archivos (1).
Fig. 4.11. Compartiendo archivos (2). Fig. 4.12. Compartiendo archivos (3).
A lmacenamiento web y multimedia4
128
En la parte superior del Administrador de archivos pode-
mos seleccionar diferentes vistas: para gestionar nuestros
archivos, para gestionar paquetes de RapidSave, para ges-
tionar las licencias adquiridas y para gestionar nuestras
carpetas compartidas.
Nos centraremos en la primera pestaña, que es el Administra-
dor de archivos propiamente dicho. En dicho Administrador,
veremos que en la ventana de la derecha disponemos de una
vista con nuestras carpetas en RapidShare. En este caso, solo
disponemos de la carpeta root y la papelera. En la parte de
la derecha, veremos el contenido de la carpeta root, donde
ubicamos en el Caso práctico anterior nuestro currículum.
Para crear una carpeta nueva, no tendremos más que
hacer clic en el icono con la carpeta y un signo de más en
rojo . Cuando se nos pida el nombre, indicaremos Car-
peta compartida.
2. Subida de archivosVamos a subir un archivo a nuestra carpeta compartida.
Para ello, deberemos, en primer lugar, seleccionar la car-
peta que acabamos de crear y veremos que su contenido
está vacío.
En segundo lugar, simplemente deberemos abrir un explo-
rador de ficheros en nuestro sistema y arrastrar el fichero
que deseamos copiar a la ventana del contenido de la car-
peta.
Caso práctico 2
(Continuación)
Fig. 4.13. Vista inicial de MiRapidShare.
Fig. 4.14. Creando una carpeta compartida. Fig. 4.15. Arrastrando un archivo (1).
2
1
Administrador de
archivos: carpetas
Administrador de archivos:
contenido de la carpeta raíz
Administrador
de archivos
Paquetes de
RapidSave
Gestión de
licencias
Carpetas
compartidas
(Continúa)
129
4A lmacenamiento web y multimedia
Una vez arrastrado, se nos abrirá el ges-
tor de subidas (RapidShare File Uploader)
que ya conocemos. Aquí deberemos
arrastrar el archivo subido también hacia
la carpeta compartida. Asegúrate en
cada caso de que pone Mover a carpeta
compartida y no a root. De todos modos,
si te equivocas, puedes arrastrar y soltar
elementos entre las carpetas del Adminis-
trador de archivos.
Si deseásemos compartir este archivo con otros usuarios, no tendríamos
más que seleccionarlo y hacer clic en el botón de Compartir , para
abrir el asistente que ya conocemos del Caso práctico anterior.
3. Eliminación de archivos
Finalmente, si deseamos eliminar alguno de los archivos subidos, debe-
remos seleccionar dicho archivo y pulsar el botón con una papelera
situado a la derecha. Se nos mostrará el siguiente diálogo de confirmación, a través del
cual podremos eliminar completamente el fichero o moverlo a la papelera (Fig. 4.17).
4. Creación de paquetes
Si deseamos compartir varios ficheros con nues-
tros contactos, o simplemente agrupar archivos
bajo un mismo enlace, haremos uso de los paque-
tes de RapidSave.
Vamos a crear un paquete con nuestro currículum y
la carta de presentación que ya hemos subido con
anterioridad. Para ello, nos situamos en la carpeta
root, donde se encuentra el fichero con el currícu-
lum, lo seleccionamos y pulsamos el botón de crear paquete de RapidSave .
Veremos que nos aparece un asistente, en el que deberemos ir añadiendo ficheros
por el método de arrastrar y soltar. Así pues, nos situamos en la carpeta compar-
tida, y arrastramos el fichero con la carta de presentación hasta la ventana de la
derecha, donde se encuentra el contenido del paquete.
Hecho esto, introduciremos el nombre del paquete y pulsaremos el botón Crear. Ahora,
si vamos a la vista de Paquetes de RapidSave, veremos que tenemos el paquete creado,
junto con su contenido, para poder compartirlo de la manera habitual.
Caso práctico 2
(Continuación)
5. Profundiza en alguno de
los servicios similares a
4Shared (como, por ejem-
plo, los de la Tabla 4.1,
entre otros), investigando
cómo podemos subir y
compartir ficheros con
nuestros contactos.
6. Investiga sobre la reapa-
rición de MegaUpload,
su estado, servicios que
ofrece y aspectos relati-
vos a la seguridad y lega-
lidad de sus contenidos.
Actividades
Fig. 4.16. Arrastrando un archivo (2).
Fig. 4.17. Eliminación de archivos.
Fig. 4.18. Creación de paquetes (1).
Fig. 4.19. Creación de paquetes (2).
A lmacenamiento web y multimedia4
130
3. Servicios de disco duro virtual
Los discos duros virtuales ofrecen un espacio de almacenamiento personal en la nube
(como si de un disco duro se tratase), donde podemos depositar archivos, sincronizarlos
con otros dispositivos, realizar copias de seguridad y compartirlos con diversos usuarios.
3.1. Generalidades de los servicios de almacenamiento web
En términos generales, los servicios de disco duro virtual poseen características similares.
A grandes rasgos, permiten las siguientes opciones:
• Guardar grandes cantidades de datos de forma segura, tanto por lo que se refiere a
la transmisión como a la custodia en los servidores.
• Crear copias de seguridad en servidores remotos.
• Compartir archivos con contactos o comunidades de usuarios.
• Acceder a los archivos desde cualquier punto de la Red y con casi todos los disposi-
tivos disponibles.
• Sincronizar automáticamente los archivos para incorporar las modificaciones.
• Algunos de ellos, como es el caso de Dropbox, que veremos seguidamente, permiten,
además, realizar un control de versiones de los diferentes documentos almacenados,
permitiendo volver a versiones anteriores.
3.2. Dropbox
Es uno de los servicios de almacenamiento web más completos. Permite mantener copias
actualizadas de todos los archivos, sincronizarlos con varios dispositivos (PC, ordena-
dores portátiles, tablets o smartphones) y recuperarlos a través de un navegador desde
cualquier lugar con conexión a Internet.
Este servicio utiliza el sistema de almacenamiento S3 de Amazon. Sin embargo, y a
diferencia de este, que está orientado a programadores y técnicos, posee un entorno
gráfico más intuitivo que mejora su usabilidad y lo acerca al usuario medio. Este servicio
ofrece de manera gratuita 2 GB de capacidad por cada cuenta, si bien puede ampliar-
se, previo pago, hasta 100 o 200 GB.
Versiones
Dropbox permite trabajar on-line a través del navegador web o mediante su aplicación
de escritorio. Conectado a Internet, presenta una interfaz web desde donde administrar
archivos y consultar el correo interno. La versión de escritorio, instalada en el ordena-
dor e integrada en el navegador de archivos del sistema operativo (Explorer, Finder o
Nautilus), crea una carpeta específica que se sincronizará con la cuenta y las carpetas
Dropbox de los dispositivos donde se encuentre instalado, de modo que cualquier cam-
bio que se realice en una se reflejará en las otras.
La versión de escritorio se encuentra disponible para GNU/Linux, Mac y Windows y
dispone también de versiones para dispositivos móviles Android, iPhone/iPad, Blackbe-
rry o Kindle Fire.
RapidShare ofece un servicio de
disco duro virtual a través de
RapidDrive, que crea un disco
duro virtual en el ordenador del
usuario (de momento, en sistemas
Windows XP/Vista/7), desde el
que accedemos al contenido del
usuario en RapidShare.
¿Sabías que…?
Fig. 4.20. Disco duro virtual RapidDrive
de RapidShare.
Fig. 4.21. Icono de Dropbox.
131
4A lmacenamiento web y multimedia
Primeros pasos con Dropbox
Duración: 15 minutos Dificultad: fácil
Objetivos:
• Crear una cuenta en Dropbox.
• Instalar la aplicación de escritorio en Ubuntu.
Solución:
1. Creación de la cuenta
En primer lugar, deberemos acceder al sitio web del servi-
cio Dropbox: www.dropbox.com. En la ventana principal,
haremos clic en el enlace Sign In, situado en la parte supe-
rior derecha. Mediante este enlace accedemos a un formu-
lario para ingresar con nuestro usuario y contraseña. Dado
que no lo tenemos creado aún, haremos clic en Create an
account, en la parte inferior del diálogo que nos aparece
(Fig. 4.22).
En este nuevo cuadro de diálogo (Fig. 4.23), deberemos
introducir nuestros datos y nuestro correo, que será al que
se asociará nuestra cuenta en Dropbox. Aceptaremos
los términos de la licencia y haremos clic en Create an
account.
Caso práctico 3
2. Descarga e instalación de la aplicación de escritorio
Cuando creamos nuestra cuenta, Dropbox nos redirige
a la página de descargas de la aplicación de escritorio,
en función de nuestro sistema operativo (Fig. 4.24). Los
pasos son prácticamente los mismos en la instalación de
todos los sistemas. En nuestro caso, descargaremos el
fichero .deb para Ubuntu de 32 bits (en tu caso, deberás
seleccionar el que corresponda con el sistema operativo
que estés utilizando).
Cuando seleccionemos el .deb, nos pedirá si quere-
mos abrirlo con el centro de software de Ubuntu o bien
si deseamos descargarlo. Podemos descargarlo si quere-
mos mantener una copia del archivo, y luego hacer doble
clic en él para abrirlo con el centro de software de Ubuntu
(Fig. 4.25).
Como vemos, esto nosinstalará el complemento para
Nautilus (el explorador de archivos de Ubuntu) de
Dropbox. En el caso de otros sistemas operativos, insta-
laremos el complemento específico para nuestro explo-
rador. Desde el centro de software de Ubuntu, hacemos
clic en el botón Install para iniciar la instalación. Dado
Fig. 4.22. Creación de cuenta en Dropbox (1). Fig. 4.23. Creación de cuenta en Dropbox (2).
(Continúa)
Fig. 4.24. Descarga de Dropbox.
Fig. 4.25. Instalación de Dropbox.
A lmacenamiento web y multimedia4
132
que vamos a instalar una aplicación común a todos los
usuarios, deberemos hacerlo como usuario administrador,
por lo que nos pedirá nuestra clave de administración.
Una vez instalado el paquete, deberemos reiniciar
Nautilus e iniciar el asistente de Dropbox. Así pues,
hacemos clic en Restart Nautilus y luego Next. En la
siguiente ventana, nos pedirá que iniciemos Dropbox.
Pulsamos en Start y nos aparecerá el asistente de confi-
guración (Figs. 4.26 y 4.27).
En el caso de que no se iniciase automáticamente el asis-
tente, deberemos ejecutar la siguiente instrucción desde
una terminal:
#dropbox start -i
Caso práctico 3
(Continuación)
3. Instalación y configuración de Dropbox en el escritorio
Hecho esto, se inicia el asistente de instalación y configu-
ración de Dropbox. El primer paso consiste en descargar
e instalar los daemons propietarios que se encargarán de
gestionar el servicio (Figs. 4.28 y 4.29). Posteriormente,
deberemos asociar nuestra aplicación de escritorio con
nuestra cuenta en Dropbox (Figs. 4.30 y 4.31). Lo hare-
mos introduciendo en el siguiente paso los datos de nues-
tra cuenta en Dropbox: correo, contraseña y el nombre de
la máquina actual, según como queramos que se muestre
para Dropbox. En nuestro caso, utilizamos Servidor.
Fig. 4.26. Reiniciando Nautilus (1). Fig. 4.27. Reiniciando Nautilus (2).
Fig. 4.28. Instalación de los daemons propietarios de Dropbox (1).
Fig. 4.29. Instalación de los daemons propietarios de Dropbox (2).
(Continúa)
Fig. 4.30. Instalación de Dropbox en Windows.
133
4A lmacenamiento web y multimedia
Caso práctico 3
(Continuación)
Fig. 4.31. Asociación de cuenta (1). Fig. 4.32. Asociación de cuenta (2).
Fig. 4.33. Tipo de cuenta.
Fig. 4.34. Tipo de instalación.
En el siguiente paso (Fig. 4.33), se nos pide si desea-
mos seguir con nuestra cuenta gratuita con 2 GB o si
deseamos contratar algunas de las modalidades de
pago. Seleccionaremos la opción de 2 GB.
Hecho esto, debemos seleccionar el tipo de configura-
ción, que puede ser (Fig. 4.34):
• Instalación típica: crea una carpeta Dropbox en
nuestra carpeta de usuario, sincronizada comple-
tamente con Dropbox.
• Instalación avanzada: nos permite seleccionar la
carpeta que utilizaremos como raíz para la sin-
cronización con Dropbox, así como las carpetas
que ya tengamos en Dropbox que deseemos uti-
lizar en esta máquina. Si, por ejemplo, tenemos
tres carpetas en Dropbox (trabajo1, trabajo2 y
cosas_personales), puede que nos interese tener
en el ordenador del trabajo únicamente las car-
petas trabajo1 y trabajo2, pero no la carpeta
cosas_personales.
En nuestro caso, vamos a elegir la instalación avan-
zada, aunque utilicemos las opciones por defecto.
En primer lugar, nos pide dónde ubicar la carpeta de
Dropbox. Elegimos /home/alumnoapw (si utilizas Win-
dows, será en la carpeta de tu usuario) (Fig. 4.35).
Después (Fig. 4.36), indicaremos que vamos a sincro-
nizar todos los archivos de nuestra carpeta Dropbox.
Si lo deseas, puedes inspeccionar la opción de sincro-
nización selectiva, donde puedes elegir las carpetas a
sincronizar.
(Continúa)
A lmacenamiento web y multimedia4
134
Y, finalmente (Fig. 4.37), nos pedirá, de forma opcional el
número de nuestro smartphone, para poder enviarnos un
enlace a la aplicación para plataformas móviles. En nuestro
caso, nos saltamos este paso, y pasamos a un breve tour de
cuatro pasos, que nos explica el funcionamiento de Dropbox.
Finalizada la instalación, veremos el siguiente mensaje (Fig.
4.38), que nos indica que el ordenador ya se ha enlazado a
nuestra cuenta.
Caso práctico 3
(Continuación)
Una vez instalado, podremos ver el icono de Dropbox en la barra principal de nuestro
sistema, así como la carpeta Dropbox en nuestro directorio principal. Si accedemos a
ella, veremos que tanto las carpetas como los archivos van acompañados de unos ico-
nos que nos muestran su estado de sincronización. Un icono azul con dos flechas,
ella, veremos que tanto las carpetas como los archivos van acompañados de unos ico-
que indica que ese recurso está siendo sincronizado con Dropbox, y uno verde con un
tick
que indica que ese recurso está siendo sincronizado con Dropbox, y uno verde con un
, que indica que el recurso ya está sincronizado con Dropbox.
Una vez instalada la aplicación de escritorio de Dropbox, dispondremos de una carpeta
llamada Dropbox (o como hayamos seleccionado en la instalación) en nuestro directorio
de usuario, de modo que los archivos que copiemos en ella se sincronizarán con nuestra
cuenta.
Además, dispondremos de un icono en la barra del sistema, donde podremos acceder
al menú de Dropbox (Fig. 4.39), desde donde podremos realizar varias operaciones. En-
tre ellas, destacan abrir directamente el sitio web de Dropbox, con nuestra cuenta, o las
preferencias de la aplicación. En esta opción de preferencias, podremos ajustar varias
opciones, tales como los datos de nuestra cuenta (Account, Fig. 4.40), ajustar el ancho
de banda que utilizará Dropbox (Bandwidth, Fig. 4.39), configurar un proxy (Proxies), o
Fig. 4.36. Elección de la carpeta Dropbox y selección de los elementos que sincronizar.Fig. 4.35. y
Fig. 4.37. Confi guración para smartphone.
Fig. 4.39. Menú de Dropbox.
Fig. 4.38. Mensaje de sincronización con Dropbox.
135
4A lmacenamiento web y multimedia
Compartiendo archivos en Dropbox
Por defecto, la carpeta Dropbox contiene dos subcarpetas: Photos, donde puedes copiar
imágenes, y Public, para depositar los archivos compartidos públicamente. Se pueden
crear más carpetas y compartirlas con un grupo de usuarios de Dropbox para que pue-
dan modificarlas.
modificar la ubicación de la carpeta Dropbox y reajustar la sincronización selectiva (en
Advanced, Fig. 4.40).
Fig. 4.40. Ajustes de la cuenta. Fig. 4.42. Confi guración avanzada.
Fig. 4.41. Ajuste del ancho de banda.
Administración web de Dropbox
Duración: 15 minutos Dificultad: media
Objetivos: aprender cómo se gestionan las carpetas con
la interfaz web de Dropbox y compartirlas con otros
usuarios.
Solución:
1. Acceso a Dropbox
Una vez creada tu cuenta, entra en la interfaz web de
Dropbox a través de https://www.dropbox.com/ > Sign In,
o bien mediante Ir al sitio web de Dropbox del botón
de Dropbox en la barra del sistema. En la pantalla inicial de
Dropbox, verás los elementos siguientes:
Caso práctico 4
(Continúa)
Ventana principal de
archivos de Dropbox Opciones del gestor de archivos
Fig. 4.43. Ajustes generales (en Windows). Fig. 4.44. Ajustes del proxy (en Windows).
Fig. 4.45. Página de inicio de Dropbox.
Menú general
de Dropbox
A lmacenamiento web y multimedia4
136
Menú general de Dropbox, con las opciones:
• Dropbox: para acceder directamente a la ventana
con nuestros archivos.
• Uso compartido: para acceder a las carpetas o
archivos que otros usuarios han compartido con
nosotros.
• Enlaces: con los enlaces a archivos que desee-
mos compartir con otros usuarios, aunque no sean
usuarios de Dropbox (tal y como hacíamos con
RapidShare).
• Eventos: donde se muestra un registro de los even-
tos que han ocurrido en nuestra cuenta (creación
de archivos, cuándo se han modificado, cuándo los
hemos compartido, etc.).
• Comenzar: se trata de un pequeño tutorial que nos
enseña lo más básico de Dropbox. Puedes echarle
un vistazo ahora para tener una idea general del
servicio.
Dentro de Dropbox, podemos ver la ventana principal de
archivos.Como puedes ver, se trata de la lista de carpetas
y ficheros que tenemos en nuestra cuenta. Puedes navegar
a través de las carpetas y realizar las siguientes operacio-
nes: subir ficheros , crear carpetas , compartir carpe-
tas y mostrar/ocultar elementos eliminados .
2. Subida de archivos
Para subir un archivo, desde la ventana principal de archi-
vos, haremos clic en el icono de subir ficheros para que
aparezca la siguiente ventana inicial del asistente (Fig.
4.46). Fíjate que desde aquí solo puedes subir un fichero
simultáneamente. Haremos clic en Elegir un archivo, y
desde una ventana de selección de archivos del sistema
elegimos un fichero cualquiera de nuestra máquina. En
nuestro caso, hemos elegido el fichero Enlaces interesan-
tes sobre aplicaciones web.txt. Hacemos clic en Aceptar y
veremos cómo en breves instantes el fichero se sube y apa-
rece en nuestra carpeta de Dropbox.
Como puedes ver, ahora tenemos la posibilidad de obte-
ner un enlace al archivo que acabamos de subir para dis-
tribuirlo con quien deseemos. Además, podemos descar-
gar el fichero y, a través de la opción Más, renombrarlo,
moverlo, eliminarlo, copiarlo o ver su historial de versiones.
De forma similar a como hemos subido un archivo, para
crear una carpeta no tendremos más que hacer clic en el
botón de crear carpetas e indicar su nombre. Para nues-
tro caso, hemos seleccionado el nombre Carpeta privada.
3. Compartiendo carpetas
En Dropbox hay varias formas de compartir una carpeta
o recursos: a) Haciendo uso de la carpeta Public, con la
que podremos obtener enlaces públicos a los ficheros que
alberguemos dentro; b) Compartir una carpeta privada
con colaboradores, mediante Invitar a una carpeta; o
c) mediante el icono de compartir carpetas . Utilizare-
mos este último. Cuando hacemos clic en el botón de com-
partir carpetas, si es la primera vez que lo utilizamos, es
posible que Dropbox nos pida verificar nuestro correo.
Caso práctico 4
(Continuación)
(Continúa)Fig. 4.46. Carga de archivos a Dropbox (1). Fig. 4.49. Validación del correo (2).
Fig. 4.47. Carga de archivos a Dropbox (2).
Fig. 4.48. Validación del correo (1).
137
4A lmacenamiento web y multimedia
Una vez validado el correo, ya podemos crear recursos
compartidos. En la siguiente ventana (Fig. 4.50), se nos
pregunta si deseamos crear una nueva carpeta compartida
o bien compartir una carpeta existente.
En nuestro caso, elegiremos crear una nueva carpeta, a
la que daremos por nombre Carpeta compartida y pulsa-
remos Siguiente, para llegar a una ventana (Fig. 4.51) en
la que deberemos elegir con qué otros usuarios deseamos
compartir esta carpeta. Deberemos indicar el correo elec-
trónico de nuestro contacto, o identificarlo a través de Face-
book.
En tu caso, comparte el recurso Carpeta compartida con
algunos compañeros de tu clase, y que ellos compartan su
carpeta contigo. Nosotros hemos compartido nuestra car-
peta con alumnosmr2010@gmail.com.
Una vez que hagamos clic en Compartir carpeta, esta será
creada y se enviará una petición a alumnosmr2010. En la
ventana de Dropbox, podemos ver la carpeta que acabamos
de crear y, a través de la opción Opciones de carpeta com-
partida, podemos ver con quién estamos compartiendo la
carpeta y su estado.
Ahora, vuestros compañeros deben haber recibido la invi-
tación, y vosotros habréis recibido las suyas.
Dentro de las opciones generales, fíjate en que aparece un
cuadrado rojo con un número en su interior (Fig. 4.53), que
indica que tenemos nuevas peticiones de recursos compar-
tidos. Cuando hacemos clic en Sharing, podemos ver un
sobre con la invitación, que deberemos abrir y pulsar en
Aceptar, si deseamos trabajar con ella.
Hecho esto, ya dispondremos de la carpeta compartida
de nuestros compañeros, accesible desde nuestro propio
espacio de Dropbox.
Caso práctico 4
(Continuación)
Fig. 4.50. Creando una carpeta compartida.
Fig. 4.51. Invitando a colaboradores.
Fig. 4.52. Opciones de carpeta compartida.
Fig. 4.53. Invitación de recurso compartido (1).
Fig. 4.54. Invitación de recurso compartido (2).
A lmacenamiento web y multimedia4
138
Seguridad en Dropbox
El envío de datos entre las máquinas cliente y el servicio de Dropbox se realiza me-
diante el sistema SSL (Secure Socket Layer), empleado también en la banca on-line. En
los servidores de Dropbox, los archivos se cifran mediante el algoritmo AES (Advanced
Encryption Standard) de 256 bits, un código de seguridad de nivel alto.
Dropbox dispone de un sistema de recuperación de archivos y versiones como meca-
nismo de copia de seguridad y respaldo con el que se mantiene un historial de todos
los cambios realizados en los archivos. En el caso de que se eliminase algún archivo o
carpeta de la utilidad Dropbox instalada en nuestro ordenador, puede restaurarse desde
la cuenta de Internet. El historial, por otra parte, nos permite revisar versiones anteriores
de un documento. En la versión gratuita, no obstante, el historial solo contempla los
últimos 30 días.
Por otra parte, desde agosto de 2012, Dropbox ofrece la posibilidad de acceso a sus
cuentas mediante verificación en dos pasos. Este mecanismo opcional, donde el usuario,
aparte de su correo electrónico para acceder a su cuenta, deberá ingresar un código
recibido vía sms en su teléfono móvil. Para activar esta opción, lo haremos a través de
las preferencias de la cuenta.
AES. Algoritmo estándar de
cifrado por bloques, muy utiliza-
do en la criptografía simétrica.
Se basa en una serie de sustitu-
ciones y permutaciones de los
símbolos. Se puede implementar
en hardware y en software.
SSL. Protocolo de capa de
conexión segura que proporcio-
na comunicaciones seguras por
una red insegura, como Internet.
La última implementación es
la 4.0, llamada TSL (Transport
Layer Security).
Vocabulario
Control de versiones y recuperación de archivos
Duración: 15 minutos Dificultad: media
Objetivos: utilizar Dropbox para el trabajo colaborativo
en equipo, controlando las diferentes versiones de los
archivos, y aprender a recuperar archivos eliminados o
versiones anteriores.
Solución:
En este caso trabajaréis por parejas, cada uno con su
cuenta de Dropbox, representando a AlumnoAPW2013
y AlumnoSMR2010.
1. AlumnoAPW2013 crea un documento en su carpeta
de Dropbox para trabajar en colaboración con Alum-
noSMR2010 y lo deposita en la carpeta compartida
Carpeta compartida, alojada en la carpeta Dropbox,
y que compartimos en el Caso práctico anterior. A
partir de ese instante, ambos podrán trabajar con
este documento de forma simultánea, combinando
las modificaciones que realicen.
2. AlumnoSMR2010 edita el documento e introduce
algunos cambios: añade unos cuantos párrafos al
artículo y lo sube a la carpeta compartida.
3. AlumnoAPW2013, por su parte, edita el artículo y
redacta los párrafos restantes. Existen, pues, tres
versiones del mismo archivo, tal y como se mues-
tra en la Figura 4.51. Si pinchas con el botón dere-
cho sobre el archivo, podrás ver que aparece, entre
otras, la opción Versiones anteriores (Fig. 4.56). Al
seleccionarla, accederás al historial de revisiones del
archivo.
Allí podrás ver las tres versiones del archivo: la actual
(Current) y las dos anteriores (1 y 2). Además, se te
informa de cuándo y dónde fue modificado, en qué con-
sistieron los cambios (creación, edición, etc.), quién los
efectuó, la opción de presurización y el tamaño de cada
una de las versiones. Esta opción resulta muy útil, ya
que permite deshacer los cambios producidos por algún
usuario y restaurar versiones anteriores de los archivos.
Si, por ejemplo, seleccionas la versión 2 y pulsas Res-
tore, se restaurará la segunda versión.
Caso práctico 5
(Continúa)
Alumno APW2013 Alumno SMR2010
1
2
3
documento.odt
documento.odt
documento.odt
documento.odt
(versión 1)
documento.odt (versión 2)
documento.odt (versión 3)
Fig. 4.55. Proceso de colaboración.
Fig. 4.56. Revisiones.
139
4A lmacenamientoweb y multimedia
Al restaurar la versión 2 anterior, no desaparecen de
manera permanente los cambios de la versión actual
anterior, sino que se crea una nueva con el contenido de la
2, de modo que esta se convierte en la 3.
Caso práctico 5
(Continuación)
Fig. 4.57. Restauración de la versión 2.
Fig. 4.58. Nueva versión a partir de la restaurada.
De modo similar, si deseas restaurar un archivo eliminado,
no tienes más que seleccionar el icono de mostrar/ocultar
archivos eliminados ( ), dentro de las opciones del nave-
gador de archivos, para ver los archivos eliminados, que
aparecerán con su nombre en gris. Si pinchas sobre él, se
mostrarán tres opciones:
• Restaurar/Undelete: para restaurar el archivo.
• Eliminar permanentemente/Purge: para eliminarlo
por completo.
• Versiones anteriores/Revisions: para volver al historial
de revisiones y restaurar una versión anterior.
7. Juan copió en su carpeta compartida Mis documentos
en Dropbox un archivo para trabajar con Pedro. Ambos
tienen instalada la aplicación de escritorio de Dropbox,
por lo que a Pedro le aparece inmediatamente este
archivo en la carpeta Mis documentos que comparte
con Juan. Después de modificar el archivo, Pedro se
da cuenta de que las modificaciones que estaba reali-
zando sobre el archivo son erróneas, por lo que decide
borrar el archivo y pedirle a Juan que lo comparta de
nuevo desde su carpeta.
• Después de esto, ¿seguirá el archivo en la carpeta
compartida de Juan?
• ¿Qué error ha cometido Pedro?
• ¿Cómo se puede solucionar este incidente?
Actividades
Fig. 4.59. Opciones de archivos eliminados.
A lmacenamiento web y multimedia4
140
DropPages: Dropbox como servidor de páginas web
Dropbox ha sido, si no el que más, uno de los servicios de disco duro virtual que mayor
éxito ha tenido en los últimos tiempos. Muestra de ello es la gran cantidad de herra-
mientas orientadas a diferentes tareas que han surgido a su alrededor. Entre ellas, cabe
destacar DropPages (http://droppages.com/), un servicio web gratuito que le permite a
nuestra cuenta de Dropbox funcionar como un hosting sencillo de páginas web.
La principal ventaja de DropPages consiste en que la subida de archivos a la Web fun-
ciona simplemente con la sincronización de archivos de nuestra carpeta de Dropbox,
evitando así el uso de clientes FTP o gestores de contenidos para administrar el sitio.
El funcionamiento de DropPages se basa en la interpretación de cierta estructura de
carpetas y ficheros a partir de plantillas. Esta estructura de ficheros se comparte con el
servicio DropPages, y este lo interpreta y lo muestra bajo su dominio droppages.com.
El modo de ir añadiendo contenidos se basa en el uso de archivos de texto que iremos
modificando o añadiendo a esta estructura.
Existe una referencia comple-
ta del lenguaje MarkDown que
se utiliza en DropPages en la
dirección: http://daringfireball.
net/projects/markdown/syntax.
Web
Creación de un hosting web con DropPages
Duración: 20-40 minutos Dificultad: media
Objetivo: utilizar Dropbox como un servicio de hosting.
Solución:
1. Descarga e instalación del tema
• En primer lugar, accederemos a la página de
DropPages para descargar un tema (http://droppa
ges.com/themes). En nuestro caso, hemos elegido
el tema Basic Theme (fichero demo.droppages.
com.zip), y lo hemos guardado en nuestro escri-
torio.
• Nuestro sitio web se alojará en una carpeta com-
partida en nuestra carpeta de DropBox. Esta
carpeta deberá tener el mismo nombre que el
dominio que vayamos a usar, por ejemplo, alum-
noapw2013.droppages.com.
Así pues, vamos a crear este directorio y a descomprimir
en él el contenido del fichero que acabamos de descar-
gar.
Podemos hacerlo desde el explorador o desde la línea
de comandos en Ubuntu, con las siguientes órdenes (en tu
caso, deberás usar otro nombre de dominio único):
Caso práctico 6
(Continúa)
alumnoapw@Servidor:~$ mkdir Dropbox/alumnoapw2013.droppages.com
alumnoapw@Servidor:~$ unzip demo.droppages.com.zip -d Dropbox/alumnoapw2013.droppages.com/
Archive: demo.droppages.com.zip
creating: Dropbox/alumnoapw2013.droppages.com/Content/
creating: Dropbox/alumnoapw2013.droppages.com/Content/1.About us/
inflating: Dropbox/alumnoapw2013.droppages.com/Content/1.About us/History.txt
inflating: Dropbox/alumnoapw2013.droppages.com/Content/1.About us/index.txt
inflating: Dropbox/alumnoapw2013.droppages.com/Content/1.About us/Team.txt
inflating: Dropbox/alumnoapw2013.droppages.com/Content/1.About us/What we do.txt
...
Fig. 4.60. Plantilla básica de DropPages.
141
4A lmacenamiento web y multimedia
2. Compartiendo la carpeta
Hecho esto, deberemos compartir la carpeta con server1@
droppages.com. En este punto, deberemos esperar un correo
electrónico de confirmación, indicando que se ha aceptado
nuestra invitación (esta confirmación no es inmediata, puede
tardar bastantes minutos) y, posteriormente, la puesta en mar-
cha de nuestro sitio (cuestión de minutos). Una vez terminado
todo (tened paciencia), podréis acceder al sitio con la plantilla
y contenidos de ejemplo, a través del nombre que hayas dado
a la carpeta, de la forma: alumnoapw2013.droppages.com
(donde alumnoapw2013 será el nombre que hayas usado en
tu Dropbox).
3. Añadiendo contenidos
Cuando descomprimimos la plantilla, se generaron las
siguientes carpetas:
• Content: con los contenidos principales del sitio,
guardados como archivos de texto para su publica-
ción en HTML.
• Public: con el contenido estático, como archivos CSS,
Javascript o todo aquello que se pueda descargar,
como ficheros PDF, imágenes o archivos comprimi-
dos.
• Templates: que contiene los ficheros HTML que se usa-
rán para mostrar los archivos de texto del contenido.
Para crear contenidos, debemos hacerlo a través de la car-
peta Content. Las páginas no son más que documentos de
texto plano que son renderizados automáticamente en HTML.
Deberemos tener en cuenta las siguientes consideraciones:
• El nombre de los archivos en Content será su URL,
codificada adecuadamente, y ocultando su extensión.
• La página inicial se deberá llamar Index. En caso de
que esta no exista, se tomará como índice el primer
documento por orden alfabético.
• Para añadir un orden a las páginas, se introduce
un número precediendo el nombre del fichero (estos
números se ocultarán también en la URL). Por ejem-
plo: 1.principal.txt.
• Para ocultar una página del menú de navegación,
deberemos precederla con el símbolo del subrayado.
Por ejemplo: _ oculta.txt.
• Para crear subpáginas dentro de otras, lo haremos a
través de su estructura de carpetas.
Así pues, si echamos un vistazo al árbol de directorios que
se creó en la plantilla y al resultado de esta, podemos ver
su relación:
Caso práctico 6
(Continuación)
(Continúa)Fig. 4.61. Relación de contenidos con las páginas.
3
2
4
5
6
7
2
1
1
3
4
5
6
7
A lmacenamiento web y multimedia4
142
Los contenidos se representarán en archivos de texto,
mediante el lenguaje MarkDown, o bien en HTML. Mark-
Down es un sencillo lenguaje, que nos permite introducir los
diferentes elementos de las páginas. Veamos algunos de
sus aspectos.
A continuación se muestra un pequeño ejemplo de cómo
usar este lenguaje. Vamos a editar la página index.txt
y modificaremos ligeramente su contenido por el siguiente:
Caso práctico 6
(Continuación)
(Continúa)
:Home
@description Esta es nuestra página de inicio
@Body
Página de Inicio
=========
Hola, bienvenidos a mi página principal con Droppages!
@News
### Noticias
* Angry Birds Correrá En La Fórmula 1.<br> Después de que
Rovio prometiera a sus usuarios nuevas versiones de los juegos
de Angry Birds, finalmente tendremos una nueva modalidad. El
nuevo videojuego de la compañía será Angry Birds Heikki, donde
los pájaros furiosos competirán en la Fórmula 1.
* Versiones Móviles De Windows 8Solo Permitirían IE<br> Micro-
soft pretende nuevamente monopolizar el mercado. La división
para dispositivos móviles de su nuevo sistema operativo Windows
8 solo permitiría ejecutar Internet Explorer, aislando total-
mente a sus competidores.
@Links
### Enlaces
* [Mi Página en weebly](http://alumnosmr.weebly.com/)
* [WordPress](http://es.wordpress.com/)
* [Dropbox](http://www.dropbox.com)
Veamos algunos detalles:
• Los dos puntos (:) hacen referencia al nombre de
una plantilla. Por tanto, la etiqueta :Home indica que
a esta página se le aplicará la plantilla Home, de
página de inicio.
• La @ al principio de una línea (@description, @Body,
@News, @Links...) indica el nombre de la sección
cuando van a existir múltiples secciones en la página.
• Las marcas ======= y ### indican diferentes tipos
de encabezados. En este caso, un h1 y h3 respecti-
vamente.
• Hemos insertado, además, una imagen mediante
, y varios enlaces
mediante [texto](dirección URL). Fíjate en que
ambas marcas se diferencian en la exclamación de
la imagen.
4. Modificando plantillas
La plantilla se guarda en la carpeta Templates, en diferen-
tes archivos MarkDown y HTML. En nuestro caso, vamos a
centrarnos en el archivo Templates/Base.html, que es
el que usan las plantillas como base. Si observas, verás que
es código HTML con algunas marcas del tipo :Nombre,
para indicar más plantillas que se aplican sobre ésta o bien
etiquetas del tipo {{NombreEtiqueta}}, que se utilizan
para sustituir por contenidos de la carpeta Content.
Si deseas añadir una imagen
personalizada a tu página,
deberás indicar su URL dentro
de los paréntesis. Puedes utilizar
cualquier imagen que encuen-
tres en Internet, o si deseas una
imagen personalizada, puedes
utilizar algún servicio de aloja-
miento inmediato de imágenes
tipo http://tinypic.com/.
Si la URL de la imagen que
quieres añadir es www.dominio.
com/imagen.jpg, indicaremos:
Claves y consejos
143
4A lmacenamiento web y multimedia
Editamos el fichero Base.html y buscaremos cerca de la línea 34, para sustituir
donde pone:
<a class=”logo” href=”/”>DEMO SITE</a>
…
<a href=”/sitemap”>Sitemap</a>
<a href=”/terms”>Terms</a>
por
<a class=”logo” href=”/”>Página de AlumnoAPW</a>
…
<a href=”/sitemap”>Mapa del sitio</a>
<a href=”/terms”>Términos y condiciones</a>
Hecho todo esto, ya podemos ver nuestros cambios en nuestro sitio web hospedado
en nuestra propia carpeta Dropbox (alumnoapw2013.droppages.com). Recuerda
que estos cambios no serán inmediatos, pues pueden pasar unos minutos hasta que
tengan efecto:
Caso práctico 6
(Continuación)
Fig. 4.62. Resultado de DropPages.
8. Crea una nueva entrada
en el menú llamada Mi
centro, que aparezca en
tercera posición (detrás
de News) y que contenga
una breve descripción de
tu centro.
9. Añade contenido a la
página de Mi Centro e
introduce en él alguna
lista, imágenes, enla-
ces y varias secciones.
Recuerda que tienes una
descripción de la sintaxis
de MarkDown en http://
daringfireball.net/pro
jects/markdown/syntax.
10. Crea otra entrada lla-
mada Mi curso en el que,
cuando accedamos, ten-
gamos una breve des-
cripción de nuestro curso,
aula, etc. Además, esta
entrada debe tener varias
subentradas para los dife-
rentes módulos del curso,
junto con una descrip-
ción.
11. En la carpeta Templa-
tes se guarda la estruc-
tura HTML del sitio, y en
Public, además, varios
ficheros CSS. Modifica
estos ficheros para cam-
biar el aspecto de tu web.
12. Haz una copia de segu-
ridad de tu sitio en otra
carpeta diferente a la de
DropPages. Manteniendo
el contenido, descarga y
aplica otra plantilla desde
la Web de DropPages.
Deberás tener cuidado y
reemplazar solo la planti-
lla, no el contenido.
Actividades
A lmacenamiento web y multimedia4
144
3.3. Otros servicios de alojamiento web
Aunque Dropbox haya sido el servicio de disco duro virtual por excelencia, existen otras
alternativas a las que se han sumado recientemente los grandes como Google, Microsoft
o Apple. Pasemos a comentar algunos de ellos.
Google Drive (drive.google.com)
El servicio de disco duro virtual lanzado en 2012 por Google, que convierte su anterior
Google Docs en un espacio de almacenamiento personal. Ofrece 5 GB gratuitos más
1 GB de almacenamiento en Picasa.
Dispone de aplicaciones de escritorio para Mac, Windows, y se espera que para Linux,
así como en tabletas y móviles iOS y Android. Admite un número ilimitado de dispositivos.
Windows Live SkyDrive (skydrive.live.com)
Se trata del servicio de alojamiento de Microsoft asociado a sus usuarios de Windows
Live. Ofrece hasta 25 GB y se integra con Windows Live Mail u Office. Permite crear
álbumes y galerías de fotos e integrarlas en su correo. Como contrapunto, no hay forma
de obtener más espacio.
Ofrece una interfaz accesible mediante navegador y permite la interacción con un
Windows Phone.
Amazon Cloud Drive (www.amazon.com)
El servicio de almacenamiento cloud de Amazon utiliza sus propios servidores S3 (Sim-
ple Storage Service), los mismos utilizados por Dropbox para ofrecer un espacio de 5 a
20 GB de almacenamiento, permitiendo subir archivos de hasta 2 GB. Ofrece además
Cloud Player para reproducir archivos musicales guardados en su espacio. Funciona en
Windows, Mac, iOS, Android, y en bastantes sitios web que utilizan su API, teniendo
limitados a ocho el número de dispositivos que se pueden asociar a una cuenta.
Ubuntu One (one.ubuntu.com)
Integrado en las últimas versiones de Ubuntu, y mejorando en cada versión, ofrece 2 GB
de espacio gratuito, ampliable a 20 GB en la opción de pago, que podemos gestionar
con cualquier máquina con Ubuntu. Permite reproducir los ficheros de audio que guar-
demos en sus servidores, y se integra perfectamente con Ubuntu. También se puede
acceder desde el móvil mediante el plan de pago Mobile.
SugarSync (www.sugarsync.com)
SugarSync puede que sea la aplicación compatible con más plataformas: Windows,
Mac OS X, iOS, Android, Blackberry, Windows Mobile, Symbian...
Ofrece 5 GB gratuitos y varios planes de pago que pueden llegar hasta los 500 GB, y
ofrece planes especiales de alto rendimiento para empresas.
iCloud (www.apple.com/icloud/)
Como sistema de almacenamiento en la nube de Apple, iCloud permite el almacenamiento de
datos en servidores remotos para su descarga en dispositivos iPhone, iPad e iPod, así como
ordenadores con Mac OS X o Windows. Aparte de servidor de diferentes tipos de archivos,
sirve como plataforma para los servidores de correo electrónico y calendario de Apple.
Puedes encontrar información
sobre el uso y funcionamiento de
Google Drive en los siguientes
enlaces y vídeos:
https://www.google.com/intl/
es/drive/start/index.html.
https://www.google.com/intl/
es/drive/start/features.html.
ht tps://www.youtube.com/
watch?v=1SjRH3SImlM.
Web
Fig. 4.63. Google Drive.
Fig. 4.64. SkyDrive.
Fig. 4.65. Amazon Cloud Drive.
Fig. 4.66. Ubuntu One.
Fig. 4.67. SugarSync.
145
4A lmacenamiento web y multimedia
iCloud ofrece 5 GB de espacio de almacenamiento gratuito, independiente de todo el
contenido que se compre en Apple iTunes (música, vídeos o aplicaciones), que se puede
descargar automáticamente en cualquier dispositivo registrado. Con planes de pago,
esta cantidad puede incrementarse a 10, 20 o 50 GB. Como dato negativo, cabe des-
tacar que los datos guardados en iCloud se hacen sin cifrar.
Wuala (www.wuala.com)
Se trata de un sistema de almacenamiento on-line de Lacie, que destaca por el gran ni-
vel de seguridad que aporta, mucho mayor que el utilizado en la banca electrónica y en
plataformas de comercio electrónico. Para el cifrado de archivos se utiliza el algoritmo
AES de 128 bits y para la autentificación de usuarios, el RSA de 2.048 bits.
Wuala dispone de una red social sobre el servicio de almacenamiento web. Los usuarios
pueden crear grupos temáticos y añadir contactosafines para compartir contenidos.
El espacio gratuito que ofrece es de 1 GB, ampliable desde los 10 GB hasta un máximo
de 1 TB mediante pago, utilizando cuentas PayPal o usando estas como pasarela para
el pago con tarjetas de crédito y débito.
Wuala dispone de una interfaz multiplataforma desarrollada en Java, por lo que solo
se requiere de soporte Java para su funcionamiento en cualquier sistema operativo.
Actualmente, ya dispone también de versiones para iPhone y dispositivos Android, que
podemos obtener de la iPhone App Store o bien de Google Play.
Mega (mega.co.nz)
El 19 de enero de 2013 se lanzó el servicio Mega, sucesor de MegaUpload, con mayo-
res prestaciones. A las pocas horas de su lanzamiento, ya disponía de 250.000 usua-
rios registrados, lo que produjo una sobrecarga en el sistema. Uno de los puntos fuertes
que presenta el sistema es la seguridad: los datos se cifran mediante el algoritmo AES,
siendo prácticamente imposible de descifrar sin la clave de cifrado, que únicamente
conoce el usuario. Por lo que respecta al espacio, ofrece en su versión gratuita 50 GB
de espacio y 500 GB de ancho de banda mensuales, y para cuentas de pago, desde
1 a 8 TB.
Otros servicios de almacenamiento web
iDrive: http://www.idrive.com/.
Fiabee: https://www.fiabee.com/es/.
Zyncro: http://www.zyncro.com/.
Spideroak: https://spideroak.com/.
Opendrive: https://www.opendrive.com/.
Adrive: http://www.adrive.com/.
Memopal: http://www.memopal.com/es/.
ZumoDrive: http://www.zumodrive.com/.
MiMedia: http://www.mimedia.com/.
Glide: http://glidesociety.com/.
Megacloud: http://www.megacloud.com/.
CX: https://www.cx.com/.
Safecopybackup: http://www.safecopybackup.com/.
Fig. 4.68. iCloud.
Fig. 4.69. Wuala.
Fig. 4.70. Mega.
13. Existen muchos servicios
de almacenamiento on-
line. Escoge uno de los
descritos o de los que se
proponen en el recuadro
y realiza un análisis de
sus características, así
como un pequeño manual
de funcionamiento. Pue-
des colgar tus conclusio-
nes en tu blog o editar
una wiki con todos los
trabajos realizados por la
clase.
Actividades
A lmacenamiento web y multimedia4
146
4. Servicios de almacenamiento multimedia
El término multimedia define la capacidad de un ordenador de mostrar o reprodu-
cir conjuntamente audio, animación, imagen, vídeo, etc., haciendo para ello uso de
software específico llamado aplicaciones multimedia. El resultado de la combinación e
integración de todas estas técnicas es la herramienta de comunicación más importan-
te que existe y abarca prácticamente todos los ámbitos, desde la educación hasta el
mundo empresarial, como la mercadotecnia, y la publicidad, sin olvidarse del ocio y el
entretenimiento. Por ejemplo, no tiene el mismo impacto comercial la presentación de un
producto de consumo de una forma simple y estática sin banda sonora que mediante
una presentación multimedia que incluya movimiento, sonido o música e imágenes de
alta calidad.
Toda esta revolución se inició a principios de la década de 1990 durante la etapa de
la Web 0.0, junto a los sistemas operativos gráficos (Microsoft Windows, sistema X-
Window de GNU/Linux, Apple Macintosh, etc.) y propiciado por el abaratamiento del
hardware, lo que facilitó la aproximación del ciudadano al, hasta entonces, lejano e in-
alcanzable mundo de los ordenadores personales. Desaparecían las largas y complejas
líneas de órdenes de texto para convertirse en sencillos clics de ratón visuales dentro de
interfaces gráficas de usuario.
4.1. La transición multimedia de la Web 1.0 a la 2.0
A mediados de la década de 1990, durante la etapa de la Web 1.0, el lenguaje HTML
empieza a integrar elementos multimedia, con etiquetas como <BGSOUND>, <IMG> o
<EMBED>. Con la Web 2.0, y sobre todo con el estándar HTML5 del W3C, se ha
dado un gran avance en la integración del multimedia en la Web. HTML5 establece
nuevos elementos y atributos más adecuados a los sitios web modernos y con valor
semántico, como las etiquetas <nav> para el bloque de navegación, <footer> para
el pie o <header> para los bloques de cabecera; además de etiquetas como el ele-
mento <canvas> que permite renderizar elementos 3D. En HTML5, la mayoría de los
elementos de presentación como <font> y <center> han quedado obsoletos, ya que
la presentación es tarea de CSS.
Veamos algunas de las etiquetas de HTML5 orientadas al multimedia:
Multimedia. Integración de
varios tipos de información
(audio, vídeo, imagen, etc.) en
un servicio o en una herramienta
software que permite su presen-
tación integral.
Vocabulario
Fig. 4.71. Logo de HTML5.
Etiqueta Descripción
<vídeo> Permite la inclusión de fi cheros de vídeo en diferentes formatos, como mp4,
webm y ogg.
<audio> Permite reproducir sonido de forma natural, sin necesidad de plugins.
<embed> Acepta una gran variedad de elementos, para insertar a través de una
aplicación externa o plugin.
<canvas> Permite producir diferentes tipos de gráfi cos, composiciones o animaciones a
través de scripts en Javascript o similar.
Tabla 4.2. Etiquetas HTML5 multimedia.
147
4A lmacenamiento web y multimedia
HTML5
Duración: 15 minutos Dificultad: fácil
Objetivo: crear una página web con elementos multimedia.
Solución:
Vamos a ver un sencillo ejemplo de página web que utilice
etiquetas HTML5 para incrustar elementos multimedia.
1. Obtención de los vídeos
Puedes utilizar vídeos que hayas grabado tú mismo desde
tu móvil o descargar algún vídeo desde cualquier portal,
como YouTube. En nuestro caso, vamos a descargar un tuto-
rial de HTML5 desde YouTube. Para ello, vamos a utilizar
la herramienta web Keepvid (http://keepvid.com), aunque
puedes utilizar cualquiera para la descarga de vídeos/
audio, como ClipNabber.
Para ello, accedemos a YouTube y buscamos el vídeo que
deseamos. Copiamos la URL (en nuestro caso http://www.
youtube.com/watch?v=mzPxo7Y6JyA), y la pegamos en la
caja de texto de Keepvid, pulsamos Download y pulsamos
en Aceptar sobre el applet de java que se encargará de la
conversión.
Caso práctico 7
(Continúa)
Hecho esto, nos aparecerá una sección en la página con
los diferentes tipos de fichero que podemos descargar. Des-
cargaremos el vídeo en formato WebM y en MP4, a la
resolución que deseemos.
Podemos hacer clic también en la descarga del fichero
MP3 utilizando SnipMP3, o utilizar cualquier archivo de
audio que dispongas.
Ten en cuenta que si el navegador no admite ficheros MP3,
puedes utilizar herramientas como soundconverter o auda-
city para realizar la conversión.
2. Creación de la página web
Una vez tengamos los archivos descargados y preparados,
los copiamos en una carpeta en nuestro home, que llama-
remos html5, y creamos en ella un fichero llamado index.
html con el siguiente contenido:
Fig. 4.72. Introducción de la URL del vídeo en YouTube.
Fig. 4.73. Descarga del vídeo.
<!DOCTYPE html>
<html>
<head>
<title>Página en HTML5</title>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8” />
</head>
A lmacenamiento web y multimedia4
148
<body>
<h1>Ejemplo de página con HTML5</h1>
<p>Vamos a ver un vídeo sobre HTML5:</p>
<video width=”320” height=”240” controls=”controls”>
<source src=”WhatisHTML5.webm” type=”video/webm” />
<source src=”WhatisHTML5.mp4” type=”video/mp4” />
<p>Tu navegador no soporta la etiqueta video o los forma-
tos utilizados.</p>
</video>
<p>Y su correspondiente audio:</p>
<audio controls=”controls”>
<source src=”WhatisHTML5.mp3” type=”audio/mp3” />
<p>Tu navegador no soporta los formatos conocidos.</p>
</audio>
</body>
</html>
Caso práctico 7
(Continuación)
14. Partiendo de alguno de los sitios creados en Internet en la Unidad 1 (Weebly,
Google Sites, etc.), edita su HTML y añade contenido con alguna de las etique-
tas HTML5 que hemos visto.
15. Si no lo hiciste en su día, prueba el test de compatibilidad con HTML5 (http://
html5test.com/) de los navegadores más habituales, y realiza unapequeña com-
parativa.
Actividades
Fig. 4.74. Resultado de nuestra página.
Puedes observar algunos detalles:
El elemento vídeo permite especificar el ancho y alto en
que estos se reproducirán con los parámetros width y
height. Además, la etiqueta controls permite añadir con-
troles de reproducción (pausa, reproducir, etc.), junto con
el vídeo.
• Tanto el elemento vídeo como audio deben tener ani-
dado el elemento source, en el que indicaremos el
fichero a reproducir mediante el atributo src y su tipo,
mediante type.
• Como ves, podemos añadir varios sources dentro de
las etiquetas vídeo y audio. Con esto, permitimos que
el navegador utilice un source u otro en función de
sus posibilidades. Por ejemplo, en nuestro caso, si
no admite el formato webm, utilizará el fichero mp4,
y si no admite ninguno nos mostrará el mensaje «Tu
navegador no admite la etiqueta vídeo o los forma-
tos utilizados».
149
4A lmacenamiento web y multimedia
4.2. Servicios web de imagen digital
Los primeros portales para el almacenamiento de imágenes digitales en la Web en el
año 2000 no tuvieron el éxito esperado, y no fue hasta 2004, con la aparición de Flickr,
a raíz de una comunidad de juegos on-line y su necesidad de compartir imágenes bajo
licencia Creative Commons, que estos servicios comenzaron a popularizarse. Dado el
gran éxito de Flickr, la empresa Yahoo! la adquirió en 2005, abandonando en 2007 su
propio proyecto Yahoo!Fotos. Su éxito se debe al servicio de edición de fotos a través
de sus API con mashups, en colaboración con el portal picnik.com.
Como era de esperar, empresas como Google y Microsoft, con Picasa (ahora integrado
en Google Drive) y Live, pretenden ganar usuarios a las redes sociales como Facebook,
MySpace, Strands o Tuenti que tanto éxito han tenido en España, precisamente por com-
partir recursos multimedia entre amigos, sobre todo imágenes y vídeos captados desde
dispositivos que están al alcance de cualquiera (móviles, cámaras…).
También han proliferado los servicios de edición de imágenes desde la Web, como el
mencionado Picnik (hasta abril de 2012) y desde 2008 una versión de Adobe Photoshop
disponible en photoshop.com (Photoshop Express).
Galerías de imágenes y portales web
Como hemos comentado, en la actualidad raro es el sitio web que no dispone de una
galería de contenidos multimedia como fotos, audio y sonido. Para lograr esto, muchos
gestores de contenidos ofrecen la posibilidad, mediante plugins, de incrustar galerías de
imágenes en nuestras páginas o post.
Para crear nuestras galerías de imágenes, tenemos también varias opciones: utilizar en
nuestro propio servidor e instalar en él aplicaciones web para crear galerías de imá-
genes, como son Gallery o Coppermine, o bien utilizar servicios de galerías web ya
existentes.
En los siguientes casos prácticos, vamos a ver cómo utilizar el servicio Cincopa (http://
www.cincopa.com/). Esta plataforma web Cincopa permite gestionar, mostrar y compar-
tir nuestros contenidos multimedia, permitiendo además la integración con otras platafor-
mas tales como WordPress, Joomla o Drupal, entre otras.
Cincopa dispone también de una API para programadores, de forma que pueden utili-
zar el servicio en sus páginas o proyectos web.
Fig. 4.75. Adobe Photoshop Express (http://www.photoshop.com).
Fig. 4.76. Pixlr-o-matic.
El portal web http://pixlr.com
dispone de múltiples herra-
mientas para el tratamiento de
imágenes on-line. La aplicación
pixlr-o-matic está disponible tam-
bién para dispositivos Android.
Web
El microblog de Twitter es uno
de los servicios que más mas-
hups está creando actualmente.
En relación con las imágenes, se
pueden ver en:
• twittervision.com.
• twitpic.com.
• twitsaver.com.
Este último hace uso del anterior
para utilizar como salvapanta-
llas del equipo.
Importante
Otra gran utilización de imáge-
nes en la Red ha venido de la
mano de los satélites y la infor-
mación cartográfica. Un claro
ejemplo son Google Maps y
Google Earth, a los que se han
añadido capas de imágenes de
Panoramio u otros recursos. Con
la llegada de Google Street
View también podemos hacer
visitas virtuales, como si estuvié-
ramos paseando por las calles
de la ciudad consultada.
Google Street View España:
ht tp://w w w.youtube.com/
watch?v=kt6xNRj9hbc.
¿Sabías que…?
A lmacenamiento web y multimedia4
150
Caso práctico 8
Cuenta en Cincopa y plugin de WordPress
Duración: 15 minutos Dificultad: media
Objetivos: registrarnos en el portal Cincopa e instalar el plugin de WordPress para su integración.
Solución:
1. Creación de la cuenta
Para crear una cuenta en Cincopa, accedemos a la Web del
servicio: http://www.cincopa.com/, y hacemos clic en la opción
Sign in, situada en el borde superior derecho de la pantalla. En
esta ventana de registro, buscaremos el botón Get Started para
crear nuestra cuenta.
Una vez creada la cuenta, podremos acceder a nuestro panel
de administración del servicio, donde podremos modificar nues-
tra información personal, consultar el espacio que nos queda
libre (en el plan gratuito, disponemos solo de 400 MB), entre
otras muchas otras cosas.
De momento, ya tenemos hecho el trabajo en esta plataforma.
En los siguientes casos prácticos veremos cómo usarla para
crear galerías multimedia. Vamos a pasar ahora a ver cómo
instalar el plugin de Cincopa en WordPress para su posterior
integración.
2. Instalación del plugin Cincopa en WordPress
Vamos a instalar un nuevo plugin en nuestro Word-
Press para poder mostrar en él los contenidos que
vayamos creando en Cincopa. Para ello:
1. Accedemos a la Web de plugins de WordPress
y buscamos el plugin Cincopa, o accedemos
directamente a su URL: http://wordpress.org/
extend/plugins/video-playlist-and-gallery-
plugin/.
2. Hacemos clic en el botón Download Version...
(en nuestro caso la 1.121), y lo guardamos en
nuestro escritorio.
3. Descomprimimos el archivo, bien mediante las
herramientas que nos facilite nuestro sistema o
mediante la línea de comandos con:
# unzip video-playlist-and-gallery-plu
gin.zip
4. Movemos la carpeta creada a la carpeta de
plugins de WordPress (recuerda, en Ubuntu
en /home/admin/lampstack-5.3.12-0/apps/
wordpress/wp-content/plugins y en Windows,
generalmente en C:\Archivos de programa\
BitNami WAMPStack\apache2\htdocs\word-
press\wp-content\plugins; si tienes WordPress
instalado en otro sitio, deberás situarte en su
carpeta plugins). Desde la línea de comandos
haríamos.
(Continúa)
Fig. 4.77. Registro en Cincopa (1).
Fig. 4.78. Registro en Cincopa (2).
151
4A lmacenamiento web y multimedia
5. También lo puedes hacer mediante el explorador de
archivos:
# mv video-playlist-and-gallery-plugin /
home/admin/lampstack-5.3.12-0/apps/word-
press/wp-content/plugins
6. Permisos. Ten en cuenta que deberás añadir permisos
de escritura para el usuario www-data. Para ello, acce-
deremos a la carpeta plugins de WordPress (supon-
gamos que está en la ruta /home/admin/lampstack-
5.3.12-0/apps/wordpress/wp-content/plugins) y añadi-
remos los pertinentes permisos:
# cd /home/admin/lampstack-5.3.12-0/apps/
wordpress/wp-content/plugins
# sudo chown -R www-data video-playlist-
and-gallery-plugin/
# sudo chgrp -R www-data video-playlist-
and-gallery-plugin/
# sudo chmod -R 755 video-playlist-and-
gallery-plugin/
Si tienes problemas con los permisos del usuario
www-data, siempre puedes añadir permiso total a la
carpeta (777), pero ten en cuenta que esto se debe
evitar en entornos de producción por motivos obvios
de seguridad.
7. Iniciamos sesión en nuestro panel de administración
de WordPress: http://127.0.0.1:8080/wordpress/wp-
admin/ (http://127.0.0.1/wordpress/wp-admin, si nos
encontramos en Windows), y en el menú principal
seleccionamos la sección de plugins. Una vez locali-
zado el plugin, haremos clic en Activar.
Caso práctico 8
(Continuación)
Fig. 4.79. Contenido de la carpeta wp-content con el plugin.
Fig. 4.80. Activando el plugin.
Fig. 4.81.Mais conteúdos dessa disciplina
revisao_p2_respostas (1)- Mapa Mental - Desenvolvimento Web
- Ferramentas de Desenvolvimento
- Mapa Mental - Desenvolvimento Web
- APOSTILA AUTISMO
- 3 Best sites to Buy Telegram Accounts (PVA Aged) (1)
- 3 Best sites to Buy Telegram Accounts (PVA Aged) (1)
- Best to Buy Verified nextdoor Accounts Safely In the vibrant (1)
- Best to Buy Verified nextdoor Accounts Safely In the vibrant (1)
- Associe corretamente as propriedades de estilo em CSS com suas descrições: Considere as seguintes propriedades de estilo em CSS: 1. background-c...
- No que se refere a enquadramentos, Detalhe (Cut Up) ou Extreme Close Up (ECU) mostra: Detalhes de uma região da face ou de um objeto. Detalhes dos pés
- De acordo com as especificações técnicas, por meio da retificação, a rugosidade mínima que conseguimos alcançar é Rt: 2,5µ. Na maioria das vezes, para
- Assinale a alternativa que exemplifica uma atração turística do Rio de Janeiro: a ) HTML image 10 b ) HTML image 11 c ) HTML image 12 d ) HTML image 1
- A linguagem HTML é composta por diversas tags que definem diferentes componentes como tabelas, campos de formulário e imagens. Algumas das tags de ...
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- Referente à Informatização do Processo Judicial, podemos afirmar que: Documento Anônimo: Relaciona-se a um documento que possui a indicação do nome de
- COLOQUEI 03 SOQUETES DE LAMPADA NA MESMA LINHA DE FIAÇÃO, SOMENTE A ULTIMA LIGA... O QUE PODE SER?
- Sobre a história da Exclusão no mundo, leia as afirmativas abaixo e assinale a alternativa correta: - Antes e durante a Idade Média a exclusão seguida
- Resolva a equação para x e assinale a alternativa com a resposta correta: 2x2−1=1 Questão 13Escolha uma opção: a. x=0 b. x=−1 c. x=±2 d. x=1 e. x=±1
- 20. Segundo as normas que regulamentam os procedimentos de trâmites processuais no âmbito da CLT, analise as sentenças a seguir e, em seguida, assinal
- O desenvolvimento de APIs RESTful com FastAPI, é comum que OS analistas precisem criar rotas que aceitem parâmetros dinâmicos. Esses parâmetros são es
- Atividades como as brincadeiras, além de construírem a corporeidade na criança, desenvolvem os aspectos inter-relacionais e também auxiliam na solu...
- Questões 03
- Prática 05
